vue 图片懒加载

什么是图片懒加载

在前端每个页面通常会有很多请求，而绝大多数浏览器每次默认的最大并发请求数为6个。这样就会导致请求很多时，请求需要排队，导致网页响应较慢，此文章就会采用图片懒加载的方法，将图片请求放在最合适的地方（当窗口出现图片时），加快网页响应速度。
举个例子：
类似于大型的淘宝商城、京东等网页，设计大量的商品图片信息，如果我们使页面包含的所有图片一次性加载完成，那用户体验很差。
目前流行的做法是滚动动态加载，也就是懒加载，显示在屏幕之外的图片默认不加载，随着页面的滚动，图片进入了显示的范围，则触发图片的加载显示
这样做的好处，一是页面加载速度快(浏览器进度条和加载转圈很快就结束了，这样用户的体验也比较好)，而是节省流量，因为不可能每一个用户会把页面从上到下滚动完

图片懒加载的原理--三种方法实现https://blog.csdn.net/darabiuz/article/details/123151266

实现

废话不多说，直接看实现

原生js

如果事先没有将图片src属性保存到其他属性上

document.addEventListener('DOMContentLoaded', function () {
  // 获取所有图片信息
  let imgs = document.getElementsByTagName('img');
  Array.from(imgs).forEach(element => {
    // 将src属性保存到data-src上
    element.setAttribute('data-src', element.getAttribute('src'))
    // 将src属性修改为加载中图片
    element.setAttribute('src', 'https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2dc68fd7bffd417c9cc874b4a12612be~tplv-k3u1fbpfcp-zoom-crop-mark:1956:1956:1956:1101.image')
  })
})

通过DOMContentLoaded生命周期函数，将img的src保存到data-src中，将src设置为加载中信息

window.onload = () => {
  // 获取所有图片信息
  let imgs = document.getElementsByTagName('img')
  // 1. 一上来立即执行一次
  let io = new IntersectionObserver(function (entires) {
    //图片进入视口时就执行回调
    entires.forEach(item => {
      // 获取目标元素
      let oImg = item.target
      // 当图片进入视口的时候，就赋值图片的真实地址
      if (item.intersectionRatio > 0 && item.intersectionRatio <= 1) {
        oImg.setAttribute('src', oImg.getAttribute('data-src'))
      }
    })
  })

  Array.from(imgs).forEach(element => {
    io.observe(element)  //给每一个图片设置监听
  });
}

通过IntersectionObserver监听图片是否出现在显示窗口，如果出现在显示窗口就将 data-src 中的信息重新给 src

vue 指令实现

// lazy 指令部分
const lazy = (app) => {
  app.directive('lazy', (el) => {
    // 加载中src
    el.src = "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2dc68fd7bffd417c9cc874b4a12612be~tplv-k3u1fbpfcp-zoom-crop-mark:1956:1956:1956:1101.image"
    const obServer = new IntersectionObserver(entries => {
      if (entries[0].intersectionRatio <= 0) return
      // 将data-src给src
      el.src = el.dataset.src
      // 取消监听
      obServer.unobserve(el)
    })
    // 监听
    obServer.observe(el);
  })
}

export default lazy;

// 指令使用
<template>
  <div>
    <div class="title">vue lazy</div>
    <img
      v-lazy
      data-src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
    />
    <img
      v-lazy
      data-src="https://img.tukuppt.com/photo-big/00/00/94/6152bc0ce6e5d805.jpg"
    />
  </div>
</template>