Lazyload

1. 项目实现介绍vue 项目搭建参考《Webpack4 搭建 Vue 项目》 文档使用 vuepress, 官方文档 https://vuepress.vuejs.org 发布文档 github pages + gh-page 项目地址 https://github.com/zxpsuper/vui-vue 文档地址 https://zxpsuper.github.io/vui-vue 处于自我摸索阶段，期待留下您的宝贵意见！ 2. v-lazy 的基本实现图片懒加载的基本原理： 先用占位图代替目标图片的 src 属性值当图片的 offsetTop < innerHeight + scrollTop 时，即图片出现在窗口内部，此时修改 src 值为 data-src 的值当然，这一切需要不断地监听滚动事件先实现一个懒加载函数var img = document.getElementsByTagName('img');function lazyload() { //监听页面滚动事件 var seeHeight = window.innerHeight; //可见区域高度 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度 for (var i = 0; i < img.length; i++) { if (img[i].getAttribute('data-image-show')) continue; // 如果已经加载完成，则不需走下面流程 if (img[i].offsetTop < seeHeight + scrollTop) { console.log(img[i].offsetTop, seeHeight, scrollTop); if (img[i].getAttribute('src') == Vue.$vuiLazyLoad.img) { img[i].src = img[i].getAttribute('data-src'); img[i].setAttribute('data-image-show', 'true'); // 给个标识，表示已经加载完成 } } } }滚动监听滚动监听，不断滚动便会不断触发滚动监听的函数，影响性能，因此在此需要加入一个防抖函数 ...

先提炼下问题和需求吧，尽量简单描述问题并复现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. 视频演示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及临时解决方法