vue指令实现图片懒加载

全局注册

 Vue.directive("lazy", {
        inserted(el, binding) {
          //定义一个观察器，entries为状态改变元素的数组
          let observer = new IntersectionObserver((entries) => {
            // 遍历
            for (let i of entries) {
              // 如果改元素处于可视区
              if (i.isIntersecting > 0) {
                // 获取该元素
                let img = i.target;
                // 重新设置src值
                img.src = binding.value;
                //取消对该元素的观察
                observer.unobserve(img);
              }
            }
          });
          // 为 img 标签添加一个观察
          observer.observe(el);
        },
      });

在组件中应用

<img :src='lazyImg' v-lazy='' v-for= '(item,index) in imgs' :key='index'>
<script>
	export default {
		data() {
			return {
				lazyImg:'',//默认图片
				imgs:['1.png','2.png','3.png']
			}
		},
		
	}
</script>