Vue使用自定义指令实现页面图片懒加载功能

项目场景

当我们向下滚动的时候图片资源才被请求到，这也就是我们本次要实现的效果，进入页面的时候，只请求可视区域的图片资源这也就是懒加载。

比如我们加载一个页面，这个页面很长很长，长到我们的浏览器可视区域装不下，那么懒加载就是优先加载可视区域的内容，其他部分等进入了可视区域在加载。

这个功能非常常见，你打开淘宝的首页，向下滚动，就会看到会有图片不断的加载；你在百度中搜索图片，结果肯定成千上万条，不可能所有的都一下子加载出来的，很重要的原因就是会有性能问题。你可以在Network中查看，在页面滚动的时候，会看到图片一张张加载出来。

实现思路

• 首先，图片的标签是 img标签，图片的来源主要是 src属性
• 浏览器是否发起加载图片的请求是根据是否有src属性决定的
• 所以，在内容没进到可视区域的时候，就先不给 img 标签的 src属性赋值

实现效果

实现代码

<template>
  <div>
  	 <div class="lazy">
      <div class="lazy-li"> 1<img v-lazyLoad="imgAddress" alt="" /></div>
      <div class="lazy-li"> <img v-lazyLoad="imgAddress" alt="" /></div>
      <div class="lazy-li"> <img v-lazyLoad="imgAddress" alt="" /></div>
      <div class="lazy-li"> <img v-lazyLoad="imgAddress" alt="" /></div>
      <div class="lazy-li"> <img v-lazyLoad="imgAddress" alt="" /></div>
      <div class="lazy-li"> <img v-lazyLoad="imgAddress" alt="" /></div>
      <div class="lazy-li"> <img v-lazyLoad="imgAddress" alt="" /></div>
      <div class="lazy-li"> <img v-lazyLoad="imgAddress" alt="" /></div>
      <div class="lazy-li"> <img v-lazyLoad="imgAddress" alt="" /></div>
      <div class="lazy-li"> <img v-lazyLoad="imgAddress" alt="" /></div>
      <div class="lazy-li"> <img v-lazyLoad="imgAddress" alt="" /></div>
    </div>
  </div>
</template>

<script>
import lazyLoad from '../../directive/test/lazyLoad'
export default {
  directives: {
    lazyLoad
  },
  data(){
    return{
    }
  },
  methods:{
  }
}
</script>

<style lang="scss">
.lazy{
  .lazy-li{
    height: 200px;
    width: 200px;
  }
}
</style>

lazyLoad.js文件如下：

const LazyLoad = {
  // install方法
  bind: function(el, binding) {
    let lazyImageObserver = new IntersectionObserver((entries, observer) => {
      console.log(observer)
        entries.forEach((entry, index) => {
            console.log(index)
            let lazyImage = entry.target;
            // 相交率，默认是相对于浏览器视窗
            if(entry.intersectionRatio > 0) {
                lazyImage.src = binding.value;
                // 当前图片加载完之后需要去掉监听
                lazyImageObserver.unobserve(lazyImage);
            }

        })
    })
    lazyImageObserver.observe(el);
  }
}

export default LazyLoad

如有疑问，欢迎评论区留言。