作者: Rita 公众号: 编程十点半 阅读原文

图片懒加载的几种实现方式汇总

1. 背景及原理

在前端项目中，当页面有很多图片的时候，图片加载就需要一定的时间，这样是很耗费服务器性能的，不仅影响渲染速度还会浪费带宽，为了解决这个问题，提高用户体验，所以就出现了懒加载这种方式来减轻服务器的压力，即优先加载可视区域的内容，其他部分的内容等进入了可视区域再进行加载，从而提高性能。

2. 实现思路

我们知道图片都是根据src 属性进行加载的，所以我们可以在图片没有进入可视区域前，先不给src赋值（或者可以先给一个很小的 loading 图的地址），等到图片进入可视区域再给 src 赋真正的值。图片的真实地址可以先存储在data-src中。了解了实现思路，那继续最关键的一步，那就是如何计算图片是否进入了可视区域呢？看具体实现吧

3. 具体实现

3.1. getBoundingClientRect API 实现

data(){
    return{
      flag: true
    }
  },
  created() {
    this.throttle(this.lazyLoad, 3000)()  //首次进入加载
  },
  mounted() {
    const that = this;
    window.addEventListener('scroll',()=>{
       that.throttle(that.lazyLoad, 2000)()
    })
  },
  methods:{
    //节流优化
    throttle(fn, delay){
      const that = this;
      return function () {
        if (!that.flag) return;
        that.flag = false;  //没执行过就一直是false，会直接return
        setTimeout(() => {
          fn.apply(that, arguments);
          that.flag = true; //setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。当定时器没有执行的时候标记永远是false，在开头被return掉
        }, delay);
      }
    },
    //懒加载函数
    lazyLoad(){
      let images = document.getElementsByTagName('img')  //不是数组，htmlCollection遍历时要注意
      //加定时器的目的是为了让images能够遍历到
      setTimeout(()=>{
        for(let i =0;i<images.length;i++){
          if(images[i].getBoundingClientRect().top<document.body.clientHeight){   //getBoundingClientRect().top 元素的上边相对浏览器视窗的位置如果小于可视窗口的高度
            images[i].src = images[i].dataset.src;
          }
        }
      },300)
    }
  }

3.2. 元素的 offsetTop API 实现

写法与第一种基本相似，只是判断进入可视区域的条件有变，通过下图，可以看出，这里进入可视区域的判断条件是某一元素 e 的

if(e.offsetTop < document.body.clientHeight+document.body.scrollTop)

3.3. IntersectionObserver API 实现

这个 api 可以自动"观察"元素是否可见，Chrome 51+ 已经支持。由于可见的本质是，目标元素与视口产生一个交叉区，所以这个 API 又叫做交叉观察器。

created() {
    this.intersectionObserver();
},
methods:{
    intersectionObserver(){
        let images = document.getElementsByTagName('img');
        const observer = new IntersectionObserver((imgs) => {
          console.log('imgs===', imgs)
          // imgs: 目标元素集合
          imgs.forEach((img) => {
            // img.isIntersecting代表目标元素可见，可见的时候给src赋值
            if (img.isIntersecting) {
              const item = img.target
              item.src = item.dataset.src
              observer.unobserve(item);
            }
          })
        })
      //定时器和Array.from的目的是让images可遍历
      setTimeout(()=>{
        Array.from(images).forEach(item => {
          observer.observe(item);
        })
      },300)
    }
}

imgs 的打印如下:

• isIntersecting 为 true 代表该目标元素可见，可以加载；
• target 即对应页面中的真实 img。

3.4. vue-lazyload 插件实现

1. 安装插件 npm install vue-lazyload --save-dev
2. 在 main.js 文件中引入并使用

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)

3. 修改图片显示方式为懒加载即可。（将 :src="xxx" 属性直接改为 v-lazy="xxx"）