懒加载问题形容
- 网站上有大量图片，若一次性间接申请所有的图片资源，很显然工夫期待过长，浪费资源。
- 所以咱们就须要须要给图片做一个懒加载，即：等看到图片，或者快看到图片时，才去加载
- 就像挪动端下拉加载一样
- 也有种数据分页的感觉
懒加载问题解决思路
- 第一步，初始时，先给图片一个
loading.gif作为img的src的值，使其显示加载中，如：img.src = loading.gif - 第二步，判断元素是否进入视口，是否（行将）能看到，再将
img的src的值，替换为真正的需要申请地址的值 - 第三步，当
img有src的值的时候，就会立即发申请，申请服务器的资源，申请胜利了，就胜利了，就达到咱们想要的成果 - 第四步，兜错，若图片加载申请失败的话，再将
img的src替换成一张加载失败谬误的图片src即可
这里有两个重点，大家须要留神：
问题一：如何判断元素是否进入可视区域？
问题二：如何判断图片加载胜利或失败了？
这两个问题的答案后文会提到，大家持续往下浏览
图片懒加载成果
最终实现的就是这样的成果
也能够去笔者的集体网站上，看效果图：http://ashuai.work:8888/#/img...
解决方案
- 或者应用现有的插件
- 或者本人写一个
计划一 插件就是好！vue-lazyload
举荐应用vue-lazyload插件各方面都很优化，官网地址：https://www.npmjs.com/package...
应用步骤，这里笔者就不赘述了，上述的效果图，也是通过这个vue-lazyload插件实现的，对应代码，在笔者的GitHub仓库中：https://github.com/shuirongsh...
计划二 本人手写一个自定义指令v-lazyload
写一个自定义指令，便于逻辑复用
如何判断元素是否进入视口了？
麻烦一些的计划：监听领有滚动条的scroll事件，去计算元素间隔领有滚动条的地位，这里笔者总结了一个公式：
滚动间隔呈现 = .target距顶部高度 - .scrollBox距顶部高度 - .scrollBox本身高度- 或
边界值 = 指标元素距顶部高度 - 滚动盒子容器距顶部高度 - 滚动盒子容器本身高度
相干代码案例，请看笔者的这篇文章：https://segmentfault.com/a/11...
应用IntersectionObserver类构造函数，去判断元素是否进入视口
IntersectionObserver是一个十分弱小的api，能够观测很多货色的变动，very good，在浏览器版本不断更新迭代的当初，其兼容性曾经十分不错了，大家能够放心使用。
对于IntersectionObserver的语法，笔者不赘述了，咱们间接上自定义指令代码
自定义指令代码
// let loadimage = "http://ashuai.work:10000/imgGifSrc/loading.gif" // 服务器加载中图片// let errorimage = "http://ashuai.work:10000/imgGifSrc/error.gif" // 服务器加载中图片let loadimage = require('../../assets/imgLazyload/loading.gif') // 本地加载中图片let errorimage = require('../../assets/imgLazyload/error.gif') // 本地加载失败图片export default { inserted(el, binding, vnode) { // 1. 先让图片显示加载中... el.src = loadimage.default // 2. 实例化一个：察看检测者 const observer = new IntersectionObserver((entries) => { // 4. 在察看监测者的对应执行函数中获取到isIntersecting属性（是否穿插） let isIntersecting = entries[0].isIntersecting // 5. 如果穿插了，就让其去加载对应src的真正的地址 if (isIntersecting) { el.src = binding.value // 6. 加载胜利就不必管它 el.onload = (res) => console.log('加载胜利', res); // 7. 加载失败了就去做一个谬误图片的占位 el.onerror = (err) => { console.log('加载失败', err); el.src = errorimage.default } // 8. 无论加载胜利或失败，都进行察看工作了 observer.unobserve(el) } }) // 3. 让这个察看检测者去察看对应img标签图片 observer.observe(el) },}应用代码
应用的话，很简略，间接：
<img class='imgLazy' v-lazyload="'http://ashuai.work:10000/imgSrc/doupo.png'" /><img class='imgLazy' v-lazyload="'http://ashuai.work:10000/imgSrc/douluo.png'" /><img class='imgLazy' v-lazyload="'http://ashuai.work:10000/imgSrc/tunshi.png'" />留神应用自定义指令别忘了要注册哦
最初，烦请各位道友去笔者的GitHub仓库看看，如果感觉对您有一点点帮忙的话，无妨不吝star
自定义指令的残缺代码也在笔者的GitHub仓库中哦