vue2和vue3实现图片懒加载方式
更新时间：2024年04月24日 14:50:46 作者：Summer不秃
这篇文章主要介绍了vue2和vue3实现图片懒加载方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
一、懒加载概念解析
简单来说，懒加载（也称为延迟加载）是指在实际需求出现时才进行资源加载的技术策略。
具体而言，当内容或资源尚未处于用户当前可视区域或交互范围之内时，并不立即加载它们，而是在用户即将访问或需要这些资源的时候再进行加载。
二、懒加载的优点总结
- 减轻首页首次加载负担：通过仅加载可视区域内的必要资源，可显著降低页面初始化时的请求数量和数据传输量，从而有效减少服务器压力。
- 提升用户体验：在网络环境不佳的情况下，提前用低分辨率的占位图片替代待加载图片，可以避免页面布局因图片加载过程中的空白或堆叠而显得杂乱无章，提升视觉上的流畅度与舒适度。
三、采用懒加载的原因
设想一个包含大量图片的网页，在未使用懒加载技术时，所有图片同时加载可能导致页面响应速度极慢，影响用户体验。
而借助懒加载方案，初始状态下仅加载可视区域内的图片，其余图片位置则显示预设的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
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue-cli3.0实现一个多页面应用的历奇经历,总结分析了vue-cli3.0实现一个多页面应用遇到的问题与相关操作注意事项,需要的朋友可以参考下2020-03-03
这篇文章主要介绍了使用ElementUI循环生成的Form表单添加校验，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上，这篇文章主要介绍了Vue3 中的模板语法,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了Vue3.0结合bootstrap创建多页面应用,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-05-05
这篇文章主要为大家详细介绍了vue面包屑组件的封装方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了vue中项目如何提交form格式数据的表单，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要给大家介绍了关于vue点击单张图片放大实现的相关资料,在vue项目中实现点击图片放大功能相信对大家来说都不陌生,文中给出了详细的js示例代码,需要的朋友可以参考下2023-07-07
vue element-ui使用required进行表单校验时自定义提示语问题
这篇文章主要介绍了vue element-ui使用required进行表单校验时自定义提示语问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了Vue3 reactive响应式赋值页面不渲染的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了vue的hash值原理也是table切换,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-12-12
最新评论