图片懒加载插件Vue-Lazyload@1.3.0存在bug及临时解决方法

栏目: JavaScript · 发布时间: 5年前

内容简介:先提炼下问题和需求吧,尽量简单描述问题并复现bug,毕竟优化图片后对网页加载速度有着非常明显的效果!而且图片懒加载技术也是大家经常用到的一种优化手段。问题:在练手的Vue项目中,首页在首次加载时图片请求数达到了60!如图:

先提炼下问题和需求吧,尽量简单描述问题并复现bug,毕竟优化图片后对网页加载速度有着非常明显的效果!而且图片懒加载技术也是大家经常用到的一种优化手段。

问题:在练手的Vue项目中,首页在首次加载时图片请求数达到了60!

如图:

图片懒加载插件Vue-Lazyload@1.3.0存在bug及临时解决方法

理想状态/需求:优化首屏首次打开时加载图片的数量

如图:

图片懒加载插件Vue-Lazyload@1.3.0存在bug及临时解决方法

寻找解决方案:在Vue资源列表中搜索后发现目前声望最高的是 vue-lazyload

踩坑之路:

于是我下载了 vue-lazyload@1.3.0 最新版本,但并没有实现预期效果而是翻了车!后来改用@1.2.6版本才解决问题。对比@1.2.6和@1.3.0的代码后发现,将@1.2.6版本中的 key: "checkInView" 这个方法替换掉@1.3.0版本中的即可解决问题。

如图:

图片懒加载插件Vue-Lazyload@1.3.0存在bug及临时解决方法

最后,为了让文章更有说明力,证明不是我的操作问题,特意录制了一段视频,完整的演示了在项目中使用 vue-lazyload@1.2.6vue-lazyload@1.3.0 后的区别,并修改 vue-lazyload@1.3.0 中的源码以解决bug.

最后,如果看官目前正在使用 vue-lazyload@1.3.0 版本,请注意这个坑。至于解决方案,文章中提到了两种,要么回退版本,要么修改源码,或者再等等,等作者修复bug。

今天中午的时候,原插件作者已确认了bug,详情访问: v1.3.0Bug求证:v-lazy会加载超出可视区域内的图片? #372

如果看官有兴趣的话,可以阅读完整文章,详情访问: Vue2x优化篇之图片懒加载插件Vue-Lazyload@1.3.0存在bug及临时解决方法


以上所述就是小编给大家介绍的《图片懒加载插件Vue-Lazyload@1.3.0存在bug及临时解决方法》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

概率论基础教程

概率论基础教程

罗斯 / 赵选民 / 机械工业出版社 / 2006-4 / 42.00元

本书是一本概率论的入门教材,系统介绍了概率论的基础理论及应用,在取材、结构和写作方法等方面具有鲜明的特点。通过例题阐述概率论的基本概念与方法是本书的一大特色。作者独具匠心地选择和编排了大量例题与习题,这些内容约占全书的三分之二。通过这些例题和习题,读者可以了解概率论在各个领域的广泛应用,如基因、彩票、法庭判决、NBA选秀等。   本书系统介绍了概率论的基础理论及应用,主要内容包括组合......一起来看看 《概率论基础教程》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具