vue2和vue3实现图片懒加载

目录

一、懒加载概念解析

二、懒加载的优点总结

三、采用懒加载的原因 

四、懒加载工作原理概述

vue2实现图片的懒加载

引入Vue-Lazyload

 使用

vue3实现图片的懒加载

引入vue3-lazy

 使用

---

一、懒加载概念解析

简单来说，懒加载（也称为延迟加载）是指在实际需求出现时才进行资源加载的技术策略。具体而言，当内容或资源尚未处于用户当前可视区域或交互范围之内时，并不立即加载它们，而是在用户即将访问或需要这些资源的时候再进行加载。 

二、懒加载的优点总结

1. 减轻首页首次加载负担：通过仅加载可视区域内的必要资源，可显著降低页面初始化时的请求数量和数据传输量，从而有效减少服务器压力。
2. 提升用户体验：在网络环境不佳的情况下，提前用低分辨率的占位图片替代待加载图片，可以避免页面布局因图片加载过程中的空白或堆叠而显得杂乱无章，提升视觉上的流畅度与舒适度。

三、采用懒加载的原因 

设想一个包含大量图片的网页，在未使用懒加载技术时，所有图片同时加载可能导致页面响应速度极慢，影响用户体验。而借助懒加载方案，初始状态下仅加载可视区域内的图片，其余图片位置则显示预设的loading图，当图片滚动至可视区域时，才触发真实图片的请求和加载，这样能极大地改善页面性能和流畅度。Vue.js生态中的一款流行插件vue-lazyload就是为解决此类问题而设计的。 

四、懒加载工作原理概述

懒加载的核心在于控制浏览器对图片资源的实际请求时机。通常做法是，先将所有图片元素以统一的占位图填充，并将真实图片地址存储在自定义属性如"data-url"中。当图片元素进入可视窗口时，JavaScript会监听到这一事件，并将该元素的"data-url"属性值赋给src属性，由此触发浏览器发出真正的图片加载请求，实现懒加载效果。 

vue2实现图片的懒加载

引入Vue-Lazyload

npm install vue-lazyload --save 

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

 使用

<img v-lazy="imgData"/>

data() {
    return {
        imgData: '图片地址'
    }
}

vue3实现图片的懒加载

引入vue3-lazy

npm install vue3-lazy --save 

// main.js 文件
import lazyPlugin from 'vue3-lazy';
import errImg from "@/assets/img/errImg.jpg";
import loadImg from "@/assets/img/loadImg.jpg";
// 配置项
createApp(App).use(lazyPlugin, {
  error: errImg,// 加载错误的图片
  loading: loadImg, // 加载时的图片
})

 使用

具体使用同vue2