图片懒加载插件[email protected]存在bug及临时解决方法

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

问题:在练手的Vue项目中,首页在首次加载时图片请求数达到了60!
如图:
项目未优化时首次加载图片数量多达60张,严重影响页面加载速度

理想状态/需求:优化首屏首次打开时加载图片的数量
如图:
使用图片懒加载后首屏图片请求数明显减少

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

踩坑之路:

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

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

视频演示bug复现
全屏播放--视频演示[email protected]版本会加载所有图片而@1.2.6版本是正确的

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

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


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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章