图片懒加载插件Vue-Lazyload@1.3.0存在bug及临时解决方法
栏目: JavaScript · 发布时间: 5年前
内容简介：先提炼下问题和需求吧，尽量简单描述问题并复现bug，毕竟优化图片后对网页加载速度有着非常明显的效果！而且图片懒加载技术也是大家经常用到的一种优化手段。问题：在练手的Vue项目中，首页在首次加载时图片请求数达到了60！如图：
先提炼下问题和需求吧，尽量简单描述问题并复现bug，毕竟优化图片后对网页加载速度有着非常明显的效果！而且图片懒加载技术也是大家经常用到的一种优化手段。
问题：在练手的Vue项目中，首页在首次加载时图片请求数达到了60！
如图：
理想状态/需求：优化首屏首次打开时加载图片的数量
如图：
寻找解决方案：在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.2.6 和 vue-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及临时解决方法》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- CocoaPods 如何加载插件
- 使用 Webapck 优化 VS Code 插件加载性能
- webpack loader—自己写一个按需加载插件
- Rust 实现动态库加载和基于此功能实现的插件管理
- shade插件解决打包后无法加载spring xsd文件办法
- 页面滚动无限加载jQuery插件jquery.infinitescroll.js使用说明
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
HTML 5 与 CSS 3 权威指南
陆凌牛 / 机械工业出版社华章公司 / 2011-4-7 / 69.00
如果你是一位有前瞻性的web前端工作者，那么你一定会从本书中受益，因为它就是专门为你打造的。 《HTML 5与CSS 3权威指南》内容系统而全面，详尽地讲解了html 5和css 3的所有新功能和新特性；技术新颖，所有知识点都紧跟html 5与css 3的最新发展动态（html 5和css 3仍在不断完善之中）；实战性强（包含246个示例页面），不仅每个知识点都配有精心设计的小案例（便于动手......一起来看看 《HTML 5 与 CSS 3 权威指南》 这本书的介绍吧!
