使用图片的懒加载！
对页面加载速度影响最大的就是图片，一张普通的图片可以达到几M的大小，而代码也许就只有几十KB。当页面图片很多时，页面的加载速度缓慢，几S钟内页面没有加载完成，也许会失去很多的用户。
所以，对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。
这样对网页的加载速度至少有几十到上百倍的提升！
原理
计算<img>是否应该显示，如果已到屏幕显示区域则显示图片，否则不加载图片
JavaScript实现
动态加载总共分为以下几个步骤，这里每个步骤都将被拆分为独立的函数
1. 添加页面滚动监听事件
2. 当触发监听事件时会执行 _loadImage 函数，该函数负责加载图片
虽然执行了_loadImage函数，但是我们得知道哪些图片需要被加载，这里的判断依据是什么呢？
3 依据就是判断该图片是否在当前窗口的可视区域内，在这里我们封装一个_isShow函数来实现
自此一个图片加载的闭环就形成了
当网页滚动的事件被触发 -> 执行加载图片操作 -> 判断图片是否在可视区域内 -> 在，则动态将data-src的值赋予该图片。
好了，这样基本就可以了。
最后给出源码，大家直接下来就可以用啦，好用别忘了给颗星呀
https://github.com/zhanyouwei/m-lazy
网友评论