Vue图片懒加载之Vue-Lazyload的使用

一、什么叫懒加载

通俗讲 : 懒加载就是延时加载，即当需要用到的时候再去加载。
那什么叫做需要用到的时候？比如一个图片在没有出现在可视区域内，就已经加载当页面里了, 但只有滚动页面下方式才能看见, 则可以认为这个图片加载的"过早"了。

二、懒加载的优点

可以减少首页首次加载的数量，减少服务器的压力
当网络请求比较慢的时候, 提前给这张图片添加一个像素比较低的占位图片，不至于堆叠在一块，或显示大片空白，让用户体验更好一点。

三、为什么使用懒加载

可以想象一个网页打开有成百上千的图片需要加载，页面会变得非常的卡顿，此时如果只是可视区域的图片加载，其他的图片可以暂时有一个占位 loading 图，等滚动它们到可视区域时再去请求真实图片并且替换就好了。vue-lazyload 插件就是解决此类问题的，对vue插件的写法不熟悉的可以先看一下vue插件

懒加载原理是什么

页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。

懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，把真正的路径存在元素的“data-url”（这个名字起个自己认识好记的就行）属性里，当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。

四、vue中如何实现懒加载

第一步: 安装

npm install vue-lazyload --save

第二步: 全局注册（main.js）

// main.js 文件
import VueLazyload from 'vue-lazyload'
// Vue.use(VueLazyload) //无配置项
// 配置项
const loadimage = require('assets/img/common/loading.gif')
// const errorimage = require('assets/img/common/error.gif')
Vue.use(VueLazyload, {
  preLoad: 1.3, //预加载的宽高比
  loading: loadimage, //图片加载状态下显示的图片
  // error: errorimage, //图片加载失败时显示的图片
  attempt: 1, // 加载错误后最大尝试次数
})
// img元素上使用v-lazy="src";<img v-lazy="showImage"/>

配置项的参数说明

键	描述	默认	选项
preLoad	表示lazyload的元素, 距离页面底部距离的百分比. 计算值为(preload – 1)	1.3	Number
error	加载失败后图片地址	'data-src'	String
loading	加载时图片地址	'data-src'	String
attempt	图片加载失败后的重试次数	3	Number
listenEvents	触发懒加载的事件	['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']	无
adapter	注册img 的loading,loaded,error 三个状态的回调函数, 参数会暴露懒加载的img元素, 可以对其进行操作.	{ }	无
filter	img未加载之前, 解析到src 的时候注册的回调函数. 可以在加载图片之前,对src进行修改. 注册在filter下的所有的函数都会执行	{ }	无
lazyComponent	是否启用懒加载组件. <lazy-component>组件中的内容只有在出现在preload的位置中才会加载组件. 这个lazyloadComponent 组件有个缺点就是,组件在加载前是什么都不渲染的, 这样子的话,有可能会影响布局, 以及加载前到加载后的切换不好, 有点突兀和生硬.	false	无
dispatchEvent	触发dom事件	false	Boolean
throttleWait	等待时长	200	Number
observer	是否启用IntersectionObserver, 这个api有兼容问题	false	Boolean
observerOptions	IntersectionObserver选项	{ rootMargin: '0px', threshold: 0.1 }	无
silent	不打印调试信息	true	Boolean

因为src中的文件会被webpack编译，assets文件夹中的图片地址，会在编译过程中重命名。vue-lazyload是在main.js文件中引入，不会被webpack进行编译，因此vue-lazyload无法获得正确的图片地址，所以直接写相对地址就无法获取到图片正确地址

第三步: 写loading图片的样式（不是必须, 视情况而定）

img[lazy="loading"]{
  display:block;
  width:50px !important;
  height:50px !important;
  margin:0 auto;
}

第四步: 使用 ( :src—>v-lazy )

  <div class="lazyLoad">
    <ul>
      <li v-for="img in arr">
        <img v-lazy="img.thumbnail_pic_s">
      </li>
    </ul>
  </div>

这里有个坑需要注意如设置了翻页功能，且每一页都是请求的数据进行渲染。
会发现其他的数据都变了，唯独图片还是原来的图片。
由于使用的数据是父组件传过来的，第一个想到父组件axios异步请求的数据导致子组件可能数据没有动态更新。但监听了下数据，发现确实是改变了 .
解决办法只要加个key就行, 如下代码

<ul>  
    <li v-for="img in list">
        <img v-lazy="img.src" :key="img.src" >
    </li>
</ul>

五、js—懒加载的实现步骤？

1)首先，不要将图片地址放到src属性中，而是放到其它属性(data-original)中。

2)页面加载完成后，根据scrollTop判断图片是否在用户的视野内，如果在，则将data-original属性中的值取出存放到src属性中。

3)在滚动事件中重复判断图片是否进入视野，如果进入，则将data-original属性中的值取出存放到src属性中。

懒加载代码实现

方式一：原生js

元素距顶部的高度 – 页面被卷去的高度 <= 浏览器可视区的高度)

来判断是否符合我们想要的条件.需要实时监听页面滚动时图片的高度变化

Vue图片懒加载之Vue-Lazyload的使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        list-style: none;
      }
      img {
        width: 400px;
        height: 300px;
      }
    </style>
    <script>
      window.onload = function () {
        var imgs = document.querySelectorAll("img");
        // 初始化执行
        lazyLoad(imgs);
        // 滚动执行
        window.addEventListener("scroll", function () {
          lazyLoad(imgs);
        });
 
        function lazyLoad(imgs) {
          for (let i = 0; i < imgs.length; i++) {
            var imgoffsetT = imgs[i].offsetTop; // 图片的距顶部的高度
            var wheight = window.innerHeight; // 浏览器可视区的高度
            var scrollT = document.documentElement.scrollTop; // 页面被卷去的高度
            if (imgoffsetT - scrollT <= wheight) {
              // 判断图片是否将要出现
              imgs[i].src = imgs[i].dataset.src; // 出现后将自定义地址转为真实地址
            }
          }
        }
      };
 
      /* 
        obj.getAttribute("属性名")
        通过元素节点的属性名称获取属性的值。
        使用data-前缀设置我们需要的自定义属性,来进行一些数据的存放,
        dataset 获取自定义属性值的使用
      */
    </script>
  </head>
  <body>
    <ul>
      <li>
        <img data-src="https://www.freexyz.cn/dev/img/img1.gif" src="https://www.freexyz.cn/dev/img/loading.gif" alt="" />
      </li>
      <li>
        <img data-src="https://www.freexyz.cn/dev/img/img2.gif" src="https://www.freexyz.cn/dev/img/loading.gif" alt="" />
      </li>
      <li>
        <img data-src="https://www.freexyz.cn/dev/img/img3.gif" src="https://www.freexyz.cn/dev/img/loading.gif" alt="" />
      </li>
      <li>
        <img data-src="https://www.freexyz.cn/dev/img/img4.gif" src="https://www.freexyz.cn/dev/img/loading.gif" alt="" />
      </li>
      <li>
        <img data-src="https://www.freexyz.cn/dev/img/img5.png" src="https://www.freexyz.cn/dev/img/loading.gif" alt="" />
      </li>
    </ul>
  </body>
</html>

方式二： getBoundingClientRect()

Vue图片懒加载之Vue-Lazyload的使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        list-style: none;
      }
      img {
        width: 400px;
        height: 300px;
      }
    </style>
    <script>
      window.onload = function () {
        var imgs = document.querySelectorAll("img");
        // 初始调动一次
        lazyLoad();
        window.addEventListener("scroll", throttle(lazyLoad, 1000), false);
 
 
        //函数1:封装判定图片是否在可视区
        function isInVisibleArea(imgOne) {
          const info = imgOne.getBoundingClientRect();
          //  获取页面可视区的高度，宽度
          let windowH = window.innerHeight;
          let windowW = window.innerWidth;
          // 限定参数在可视区内
          let res = info.bottom > 0 && info.top < windowH && info.right > 0 && info.left < windowW;
          return res;
        }
 
 
        //函数2: 封装滚动时重新加载函数
        function lazyLoad() {
          for (let i = 0; i < imgs.length; i++) {
            const imgOne = imgs[i];
            // 判定是否在可视区内
            if (isInVisibleArea(imgOne)) {
              // 替换src方法一：
              // imgOne.src = imgOne.getAttribute("data-src");
              // 替换src方法二：
              imgOne.src = imgOne.dataset.src;
              // imgs.splice(i,1)
              // i--;
            }
            console.log("我滚了"); //所以要做节流操作
          }
        }
 
 
        //函数3:节流函数
        /* 
        参数1:函数
        参数2:执行时间
         */
        function throttle(fn, time = 250) {
          let lastTime = null;
          return function (...args) {
            const now = Date.now(); //当前时间
            if (now - lastTime >= time) {
              fn();//帮助执行函数，改变上下文
              lastTime = now;
            }
          };
        }
 
      };
   
      /* 
      getBoundingClientRect()
           ——获取元素位置，这个方法没有参数
           ——用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。
           ——是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。
      该函数返回一个Object对象，该对象有6个属性：top,lef,right,bottom,width,height；
 */
 
    </script>
  </head>
  <body>
    <ul>
      <li>
        <img data-src="https://www.freexyz.cn/dev/img/img1.gif" src="https://www.freexyz.cn/dev/img/loading.gif" alt="" />
      </li>
      <li>
        <img data-src="https://www.freexyz.cn/dev/img/img2.gif" src="https://www.freexyz.cn/dev/img/loading.gif" alt="" />
      </li>
      <li>
        <img data-src="https://www.freexyz.cn/dev/img/img3.gif" src="https://www.freexyz.cn/dev/img/loading.gif" alt="" />
      </li>
      <li>
        <img data-src="https://www.freexyz.cn/dev/img/img4.gif" src="https://www.freexyz.cn/dev/img/loading.gif" alt="" />
      </li>
      <li>
        <img data-src="https://www.freexyz.cn/dev/img/img5.png" src="https://www.freexyz.cn/dev/img/loading.gif" alt="" />
      </li>
    </ul>
  </body>
</html>

上面的方法需要频繁触发 scroll 事件，很容易造成卡顿或者页面性能问题。

方式三：IntersectionObserver(callback)

1.概念

IntersectionObserve 是浏览器提供的一个原生构造函数，它也被称作交叉观察器。 它可以观察我们的元素是否可见，也就是是否和可视区发生交叉。官网的解释：IntersectionObserver 接口提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根(root)。

官网说的稍微晦涩一点，我们通俗的给大家解释一下，结合一张图应该就很好里面了。
通俗的解释：我们可以使用 IntersectionObserver 接口观察一个元素，观察它是否进入了可视区，这个可视区可以相对于视窗或者祖先元素。

Vue图片懒加载之Vue-Lazyload的使用

上面的图就很形象的描述了一个元素逐步出现在可视区内的过程，当元素和可视区发生交叉时，则代表进入可视区内了。而我们的 “交叉观察器” IntersectionObserve 就和名字一样，专门用来观察何时交叉。

2.基本使用

IntersectionObserve 使用起来很简单，我们了解了它接收的参数以及携带的方法如何使用后，便可以很快的上手。

2.1 初始化实例

因为它是一个构造函数，所以我们可以使用 new 的方式实例化它，代码如下：

<script>
  let IO = new IntersectionObserver(callback, options);
</script>

该构造函数接收两个参数：

callback：回调函数，当元素的可见性发生变化，即元素与目标元素相交发生改变时会触发该回调函数。
options：一些配置项参数，如果不传会有默认值，它可以用来配置可视区元素、什么时候触发回调等等，默认就是浏览器视口。

2.2 回调函数参数callback 会接收两个参数

主要解释如下：

entries：它是一个 IntersectionObserverEntry 对象数组，IntersectionObserverEntry 主要存储的是一些观察元素的信息，主要有以下 7 个属性：

time：可见性发生变化的时间，是一个高精度时间戳，单位为毫秒
target：被观察的目标元素，是一个 DOM 节点对象
rootBounds：根元素的矩形区域的信息，getBoundingClientRect()方法的返回值，如果没有根元素（即直接相对于视口滚动），则返回 null
boundingClientRect：目标元素的矩形区域的信息
isIntersecting：目标元素当前是否可见 Boolean 值可见为 true
intersectionRect：目标元素与视口（或根元素）的交叉区域的信息
intersectionRatio：目标元素的可见比例，即 intersectionRect 占 boundingClientRect 的比例，完全可见时为 1，完全不可见时小于等于 0

observer：它返回的是被调用的 IntersectionObserve 实例，我们通常无需操作。

2.3 options 配置options 是构造函数的第二个参数，是一个对象的形式，它主要一些配置信息，主要配置项有如下几个：

root：主要用来配置被观察元素是相对于谁可见和不可见，如果不配置，则默认的是浏览器视口。
threshold：主要用来配置两个元素的交叉比例，它是一个数组，用于决定在什么时候触发回调函数。
rootMargin：用来改变可视区域的范围，假如我们可视区域大小是 300×300，可以通过该参数改变可视区域大小，但是实际像素值并没有变，优点类似于我们上拉加载更多场景：当距离底部多少多少像素的时候就加载。

看图理解：

Vue图片懒加载之Vue-Lazyload的使用

let viewport = document.getElementById("viewport"); // 可视区域
let options = {
  root: viewport,
  threshold: [0, 0.5, 1],
  rootMargin: '30px 100px 20px'
}

2.4 实例方法

初始化实例后，我们就可以调用实例方法了。IntersectionObserver 实例常用的方法常主要有下面几个：

IO.observe([element])：使用该方法后代表我们开始观察某个元素了，它接收一个元素节点作为参数，也就是被观察元素。
IO.unobserve([element])：该方法用于停止观察某元素，同样接收一个元素节点作为参数。
IO.disconnect()：该方法用于关闭观察器。

可以先简单演示一下，看看何时触发 callback。

3.代码演示

3.1 查看 entries 和 observe

我们先来看一下回调函数里面默认传递的参数打印出来是什么：entries 和 observe。
示例代码：

<head>
  <style>
    .viewport {
      width: 300px;
      height: 200px;
      border: 1px solid blue;
      overflow: auto;
    }
    .box1 {
      height: 600px;
      width: 100%;
    }
    .observed {
      width: 100px;
      height: 100px;
      border: 1px solid green;
    }
  </style>
</head>


<body>
  <div class="viewport" id="viewport">
    <div class="box1">
      <div class="observed" id="observed"></div>
    </div>
  </div>
</body>
<script>
  let viewport = document.getElementById("viewport"); // 可视区域
  let observed = document.getElementById("observed"); // 被观察元素
  let options = {
    root: viewport, // 指定可视区元素
  }
  let IO = new IntersectionObserver(IOCallback, options); // 初始化实例
  IO.observe(observed); // 开始观察


  // 回调函数
  function IOCallback(entries, observer) {
    console.info("entries", entries);
    console.info("observer", observer);
  }
</script>

Vue图片懒加载之Vue-Lazyload的使用

输出结果：

Vue图片懒加载之Vue-Lazyload的使用

这里的代码还比较简单，我们这里设置了视图窗口为我们指定的 id 为 viewport 的元素，被观察元素为 id 为 observed 的元素。当我们刷新页面的时候，IOCallback 回调函数便会执行，且打印了 entries 和 observe，至于它们中每个参数代表的意义大家可以参照上一节。

Vue图片懒加载之Vue-Lazyload的使用

3.2 实现图片懒加载

图片懒加载是我们非常常见的一个场景了，这里我们拿这个场景距离相信大家可以更加容易理解。
需求背景：我们有非常多的图片，如果一次性全部渲染，非常消耗性能。所以我们需要实现图片出现在可视区域内后在进行渲染加载。
实现思路：

先确定可视区窗口
为所有 img 标签添加一个自定义 data-src 属性，用来存放图片真正路径
利用 IntersectionObserve 观察每一张图片是否进入可视区内
如果进入可视区内，则将图片的 src 路径替换为真正的 data-src 路径

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        list-style: none;
      }
      img {
        width: 400px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <ul id="view">
      <li>
        <img data-src="https://www.freexyz.cn/dev/img/img1.gif" src="https://www.freexyz.cn/dev/img/loading.gif" alt="" />
      </li>
      <li>
        <img data-src="https://www.freexyz.cn/dev/img/img2.gif" src="https://www.freexyz.cn/dev/img/loading.gif" alt="" />
      </li>
      <li>
        <img data-src="https://www.freexyz.cn/dev/img/img3.gif" src="https://www.freexyz.cn/dev/img/loading.gif" alt="" />
      </li>
      <li>
        <img data-src="https://www.freexyz.cn/dev/img/img4.gif" src="https://www.freexyz.cn/dev/img/loading.gif" alt="" />
      </li>
      <li>
        <img data-src="https://www.freexyz.cn/dev/img/img5.png" src="https://www.freexyz.cn/dev/img/loading.gif" alt="" />
      </li>
    </ul>
 
    <script>
      const imgs = document.querySelectorAll("img");
      const callback = (res) => {
        //res 是观察的元素数组   info 每个被观察的图片信息
        // 循环所有观察元素
        res.forEach((info) => {
          //  isIntersecting 目标是否被观察到，返回布尔值
          if (info.isIntersecting) {
            // img 就是当前的图片标签
            const img = info.target;
            img.src = img.getAttribute("data-src");
            // 真实地址替换后 取消对它的观察
            obs.unobserve(img);
            console.log("触发");
          }
        });
      };
      const obs = new IntersectionObserver(callback);// 实例化 IntersectionObserver
      // 遍历imgs所有的图片，然后给每个图片添加观察实例
      imgs.forEach((img) => {
        //  observe : 被调用的IntersectionObserver实例。给每个图片添加观察实例
        obs.observe(img);
      });
 
   /* IntersectionObserver(callback) 
        callback回调触发两次，看见了出发，看不见也触发
   */
    </script>
  </body>
</html>

警告：IE 不兼容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

Vue图片懒加载之Vue-Lazyload的使用

目录

一、什么叫懒加载

二、懒加载的优点

三、为什么使用懒加载

懒加载原理是什么

四、vue中如何实现懒加载

五、js—懒加载的实现步骤？

懒加载代码实现

方式一：原生js

方式二： getBoundingClientRect()

方式三：IntersectionObserver(callback)

评论(0)

提示：请文明发言取消回复

作者信息

本站推荐

抖音小红书视频号短视频带货与直播变现更新

小红书电商自媒体创富课实战打卡笔记训练营

AI入门到精通，五阶课程学通识，掌握多领域实操要点

复制粘贴赚钱项目，零门槛零成本评论区留言评论即可轻松日赚取100+

商品卡运营课程，从选品到流量提升，学会抖音店铺动销与千川精准投放

今日头条掘金2.0，用AI工具写爆款文章，日入200+

热门资源

苹果cms海螺影视模板/大橙子模板/仿B站模板/v7模板/带手机移动端+详细安装使用说明

【已测】修复版H5骰子微信竞猜游戏骰宝免公众号版修复登录ID相同完美全套源码对接免签支付

网页游戏卧龙吟一键服务端加远程工具带架设教程

邪风曲单机版 2D回合制网络游戏源码一键安装即玩服务端公益服+GM工具

完整可用版本去水印小程序源码带教程源码

仙侠H5【苍穹剑诀】一键即玩端+授权后台+外网教程

Vue图片懒加载之Vue-Lazyload的使用

目录

一、什么叫懒加载

二、懒加载的优点

三、为什么使用懒加载

懒加载原理是什么

四、vue中如何实现懒加载

五、js—懒加载的实现步骤？

懒加载代码实现

方式一：原生js

方式二： getBoundingClientRect()

方式三：IntersectionObserver(callback)

评论(0)

提示：请文明发言 取消回复

相关文章

作者信息

本站推荐

热门资源

提示：请文明发言取消回复