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虚拟Dom到真实Dom的转换
本文主要介绍了Vue虚拟Dom到真实Dom的转换，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧
2021-07-07
如何在vue里添加好看的lottie动画
这篇文章主要介绍了在vue里添加好看的lottie动画效果的方法，在vue中引入lottie非常简单,需要的朋友可以参考下
2018-08-08
Vue中watch使用方法详解
watch就是当值第一次绑定的时候，是不会执行监听函数的，只有值诞生改变才会执行。如果需要在第一次绑定的时候也执行函数，则需要用到immediate属性，比如当父组件向子组件动态传值时，子组件props首次获取到父组件传来的No认知时，也需要执行函数
2023-01-01
详解vue嵌套路由-query传递参数
本篇文章主要介绍了详解vue嵌套路由-query传递参数，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
vue 路由页面之间实现用手指进行滑动的方法
下面小编就为大家分享一篇vue 路由页面之间实现用手指进行滑动的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随跟随小编过来看看吧
2018-02-02
应用provide与inject刷新Vue页面方法
这篇文章主要介绍了应用provide与inject刷新Vue页面的两种方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，多多进步，祝大家早日升职加薪
2021-09-09
vue3中获取dom元素和操作实现方法
ref是Vue3中一个非常重要的功能,它可以用来获取DOM节点,从而实现对DOM节点的操作,下面这篇文章主要给大家介绍了关于vue3中获取dom元素和操作实现的相关资料,需要的朋友可以参考下
2023-06-06
vue.js实现h5机器人聊天（测试版）
这篇文章主要为大家详细介绍了vue.js实现h5机器人聊天测试版，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-07-07
VUE实现Studio管理后台之鼠标拖放改变窗口大小
这篇文章主要介绍了VUE实现Studio管理后台之鼠标拖放改变窗口大小的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的工作或学习具有一定的参考价值,需要的朋友可以参考下
2020-03-03
vue中@click绑定事件点击不生效的原因及解决方案
根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件，这篇文章主要介绍了vue中@click绑定事件点击不生效的解决方案,需要的朋友可以参考下
2022-12-12