signed

QiShunwang

“诚信为本、客户至上”

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

2021/6/3 15:47:12   来源:

在这里插入图片描述

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

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

在这里插入图片描述