在vue中使用图片懒加载

已于 2022-04-15 09:39:02 修改
阅读量852 收藏 1
点赞数 1
分类专栏： Vue2 文章标签： 前端 vue
于 2022-04-14 21:54:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56818823/article/details/124182533
版权
本文介绍了如何在Vue项目中通过npm安装vue-lazyload模块，实现图片的懒加载功能，以降低服务器压力。在main.js中引入并配置vue-lazyload，设置加载和错误图片。当页面滚动时，图片才会按需加载，避免一次性请求所有图片数据。懒加载对于提升网页性能和用户体验具有重要意义。
摘要由CSDN通过智能技术生成

在npm中下载图片懒加载模块

npm  i  vue-lazyload  -s

下载完成以后通过vue中的main.js进行引入然后进行配置

// 引入vue-lazyload
import VueLazyload from "vue-lazyload";

// 使用vue-lazyload
Vue.use(VueLazyload, {
  // 配制加载状态显示的图片
  loading: require("./assets/lazyload/loading.gif"),
  // 配制加载出错显示的图片
  error: require("./assets/lazyload/error.jpg"),
  // loading: 'lazyload/loading.gif',
  // error: 'lazyload/error.jpg',
});

引入模块成功以后，项目中的图片就将以懒加载的方式呈现，这样减少了服务器的压力

假如我在这里通过懒加载的方式加载10张图片

它在页面的加载情况会如下显示，鼠标滚动才会向服务器再次发送请求，获取数据

 如果在项目中不使用懒加载，就会增加服务器的压力，请求就会如下图一样，一次性请求所有的数据，所以开发中图片懒加载还是不能忽视的

多看书少吃饭
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
vue实现图片懒加载的方法分析
10-15
主要介绍了vue实现图片懒加载的方法,结合实例形式分析了vue.js图片懒加载插件安装、使用方法与相关操作注意事项,需要的朋友可以参考下
Vue实现一个图片懒加载插件
12-12
这篇博客采用“三步走”战略——Vue.use()、Vue.direction、Vue图片懒加载插件实现，逐步实现一个Vue的图片懒加载插件。 Vue.use() 就像开发jQuery插件要用$.fn.extent()一样，开发Vue插件我们要用Vue.use()。其实...
vue实现图片懒加载
最新发布
technician_ing的博客
06-05 434
监听scroll事件，获取img元素相对于网页的顶点位置offsetTop，只要这个值小于可视区域高度和滚动高度之和，就说明进入可视区域，当图片进入可视区域时再去加载图片资源。如果用以下方式进行替换路径，会导致路径解析失败，解析后的路径是http://localhost:8080/@/assets/logo.png。“懒加载”即：延迟加载，对于一个很长的页面，优先加载可视区域的内容，其他部分等进入可视区域时再加载。首先给图片一个占位资源，等到图片到达可视区域，再替换成真实路径。2.2 js监测屏幕实现。
Vue图片懒加载
小绵杨
12-11 3865
1、问题 在vue项目中，如果图片是从服务器端加载到页面上，图片较大的时候，就会存在一部分一部分加载的情况，会显示非常卡顿，影响体验。 2、实现 （1）、图片懒加载 首先将图片的src链接设为一张我们已经准备好的图片（比如类似加载中的图片），并将其真正的图片地址存储在img标签的自定义属性中。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。这样就可以缓解服务器压力，并且提高用户体验。 （2）、安装vue-lazyload npm i vue-lazyload
Vue中的图片懒加载
虎康的博客
12-22 357
文章目录图片懒加载一、安装插件二、在入口文件 main.js 中并引入使用懒加载插件三、在所需要的文件中修改img 对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验。 实现方法(使用vue的vue-lazyload插件) 图片懒加载 一、安装插件 npm install vue-lazyload@1.2.6 --save 二、在入口文件 main.js 中并
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
11-27
在Vue.js应用中，为了优化用户体验，特别是在处理大量图片或者网络环境较差时，可以采用图片懒加载技术。本文将详细讲解如何使用`vue-lazyload`插件来实现这一功能。 `vue-lazyload`是一个专门针对Vue.js设计的图片...
vue使用图片懒加载
weixin_45797900的博客
05-19 415
直接npm下载，挂在到vue使用即可。 npm install vue-lazyload --save-dev //安装懒加载包 入口文件main中引入 import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload) 可配置自定义属性 Vue.use(VueLazyload, {preLoad: 1.3,error: 'dist/error.png',loading: 'dist/loading.gif',attempt: 1})
vue图片懒加载
weixin_49554584的博客
01-19 6540
我们使用软件的时候，会有很多图片需要加载，但是当网络环境不好，或内存不足的情况，就会导致用户首屏加载特别慢，影响用户体验，所以为了解决这个问题，提出了图片懒加载的方法来解决该问题。这样做的好处就是可以使用当前网络环境来全力加载该可视区域的图片，增加加载速度；②首屏加载时候img标签src赋为空值，这样就不会去渲染看不见的图片而浪费时间。③当用户滑动到图片的可视区域后，替换src的路径，改为正式路径，则开始渲染图片。①当图片区域到达用户界面可视区域的时候才进行加载图片。
Vue实现图片懒加载
前端卷王小白的博客
08-12 910
图片懒加载,Vue自定义指令,VueUse使用
VUE图片懒加载
qq_47443027的博客
08-06 436
什么叫懒加载 通俗讲 : 懒加载就是延时加载，即当需要用到的时候再去加载。 那什么叫做需要用到的时候？ 比如一个图片在没有出现在可视区域内，就已经加载当页面里了, 但只有滚动页面下方式才能看见, 则可以认为这个图片加载的"过早"了。 懒加载的优点 可以减少首页首次加载的数量，减少服务器的压力 当网络请求比较慢的时候, 提前给这张图片添加一个像素比较低的占位图片，不至于堆叠在一块，或显示大片空白，让用户体验更好一点。 为什么使用懒加载 可以想象一个网页打开有成百上千的图片需要加载，页面会变得非常
vue 图片的懒加载
sq-20184的博客
05-03 522
面试的时候一直被问懒加载，预加载的问题，回答的比较含糊。利用假期做了个vue 的懒加载，具体如下。 首先你的安装 npm install vue-lazyload --save-dev 或者yarn add vue-lazyload --save-dev 然后在main.js 里面引入 main.js import Vue from 'vue' import App from './App....
vue3 使用图片懒加载
05-05
在 Vue 3 中，你可以使用 Vue 提供的 `v-lazy` 指令来实现图片懒加载。以下是一个简单的示例： 1. 安装 `vue-lazyload` 包。 ```bash npm install vue-lazyload ``` 2. 在 `main.js` 中引入并使用 `VueLazyload`。 ```javascript import Vue from 'vue' import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload, { loading: '/loading.gif', // 预加载图片 error: '/error.png' // 加载失败图片 }) ``` 3. 在模板中使用 `v-lazy` 指令。 ```html <img v-lazy="imageSrc" alt="图片"> ``` `imageSrc` 是图片的地址，当图片进入可视区域时，`v-lazy` 会自动加载图片。 注意：`v-lazy` 只能用于 `img` 标签，不能用于背景图片等其他元素。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

多看书少吃饭

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值