vue图片懒加载

矫情吗；* 2022-06-09 13:08 365阅读 0赞

vue做的项目，图片较多，都是直接引入的，每次打开主页加载比较慢。

![Center][]

请求总共10.7M，只是图片就占了差不多9M，完成时间花了37秒，估计老板看到这个速度弄死我的想法都有了。

这是后我们可以使用图片懒加载的方式，和以前Jquery图片懒加载的效果是一样的，当你需要展示这张图片的时候，才去请求它，加载出来，这样效率会高很多。

这里vue用的懒加载是：vue-lazyload

GitHub地址：[https://github.com/hilongjw/vue-lazyload][https_github.com_hilongjw_vue-lazyload]

命令：

cnpm install vue-lazyload

引入：

import VueLazyload from 'vue-lazyload'

在main.js中全局使用:

Vue.use(VueLazyload, \{  
preLoad: 1,    //预加载高度的比例  
error: 'http://cdn.uehtml.com/201402/1392662591495\_1140x0.gif',  //图像的src加载失败  
loading: 'http://cdn.uehtml.com/201402/1392662591495\_1140x0.gif', //src的图像加载  
attempt: 1,  //尝试计数  
listenEvents: \[ 'scroll', 'mousewheel' \] //你想要监听的事件,我个人喜欢全部监听，方便  
\});

页面当中的写法：

<img src="" v-lazy="Img1"  />    //src空着即可，不用写

在data（）中将图片地址引入：

Img1:'../../static/images/20170903234241.jpg'

最后需要注意图片存放路径，static文件夹下面才是最安全的。

![Center 1][]

这是最终的效果，加载了8M，和之前相比相差2M，但是时间缩小很多。

参考博客：[http://blog.csdn.net/bboyjoe/article/details/72677677][http_blog.csdn.net_bboyjoe_article_details_72677677]

[Center]: /images/20220609/a369f482cff8462cbbd5293ee54061af.png
[https_github.com_hilongjw_vue-lazyload]: https://github.com/hilongjw/vue-lazyload
[Center 1]: /images/20220609/f4b88f130f8c4c86a630ec418565ead7.png
[http_blog.csdn.net_bboyjoe_article_details_72677677]: http://blog.csdn.net/bboyjoe/article/details/72677677

发表评论取消回复

表情：

评论列表（有 0 条评论，365人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue图片懒加载

vue做的项目，图片较多，都是直接引入的，每次打开主页加载比较慢。 ![Center][] 请求总共10.7M，只是图片就占了差不多9M，完成时间花了37秒，估计老板

矫情吗；*/ 2022年06月09日 13:08/ 0 赞/ 366 阅读

相关图片懒加载

懒加载的意义[（在线demo预览）][demo] 尽管很多公司的网页都有一些限制，比如页面的最大的图片大小不得大于50k,也有很多图片优化工具fis3、gulp等等，但是

痛定思痛。/ 2022年06月04日 07:58/ 0 赞/ 394 阅读

相关图片懒加载

在实际的项目开发中，我们通常会遇见这样的场景：一个页面有很多图片，而首屏出现的图片大概就一两张，那么我们还要一次性把所有图片都加载出来吗？显然这是愚蠢的，不仅影响页面渲染速度，

偏执的太偏执、/ 2022年05月28日 02:07/ 0 赞/ 421 阅读

相关图片懒加载

<!--<me

亦凉/ 2022年05月23日 12:19/ 0 赞/ 367 阅读

相关图片懒加载

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>

r囧r小猫/ 2022年05月21日 06:54/ 0 赞/ 400 阅读

相关 vue-lazyload 图片懒加载

第一步npm install vue-lazyload --save 然后在main.js里引入 import VueLazyLoad from 'vue-lazyload

布满荆棘的人生/ 2022年05月09日 08:03/ 0 赞/ 320 阅读

相关 vue 图片懒加载

安装、引用、配置三部曲 1、安装\` npm install vue-lazyload --save-dev 2、在main.js中引用 impor

傷城~/ 2022年04月23日 12:02/ 0 赞/ 330 阅读

相关 vue图片懒加载

介绍： vue-lazyload主要应用于图片延迟加载。包含如下的特点：小巧轻便，功能强大，易于使用可以用于加载任何图像类型支持Vue 1.0和Vue 2.0

缺乏、安全感/ 2021年12月07日 09:59/ 0 赞/ 562 阅读

相关图片懒加载

\[外链图片转存失败(img-vbwUXXxJ-1563574134995)([https://upload-images.jianshu.io/upload\_images/

川长思鸟来/ 2021年09月30日 00:24/ 0 赞/ 700 阅读

相关 vue 图片懒加载和懒加载原理

在真实图片得到之前,展示懒加载设置的图片 1、安装 cnpm i vue-lazyload -S 2、main.js

你的名字/ 2021年07月24日 20:08/ 0 赞/ 794 阅读