图片懒加载插件VueLazyload130存在bug及临时解决方法

10次阅读

共计 739 个字符,预计需要花费 2 分钟才能阅读完成。

先提炼下问题和需求吧,尽量简单描述问题并复现 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.6vue-lazyload@1.3.0后的区别,并修改 vue-lazyload@1.3.0 中的源码以解决 bug.

视频演示 bug 复现
全屏播放 – 视频演示 vue-lazyload@1.3.0 版本会加载所有图片而 @1.2.6 版本是正确的

最后,如果看官目前正在使用 vue-lazyload@1.3.0 版本,请注意这个坑。至于解决方案,文章中提到了两种,要么回退版本,要么修改源码。或者直接升级到 1.3.1 版本,刚去看了下,作者已经更新了版本。

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


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

正文完
 0