js实现图片的懒加载

图片懒加载指的是在浏览过程中随着需要才被加载出来,例如某宝上面浏览商品时,会伴随很多的图片,如果一次全部加载出来的话,显然资源有些浪费,并且加载速度也会相对降低,那么懒加载的实现很重要。即随着浏览翻阅时,下面的图片才被加载出来,这样又不浪费带宽,访问网页速度也很快,用户体验也会有所提升。

说了这么多,其实所需要注意的要点有:

1. 屏幕可视区域的高度

2. 每张图片在文档中的高度

3. 图片符合要求进行加载时,将图片地址赋值给属性 src

4. 对屏幕滚动事件进行监控

5. 首次进入网页未滑动屏幕时要显示的图片

要测试图片懒加载效果,可以在Chrome浏览器的控制台选择“Network”,把“Online”改为“Slow 3G”就可以模拟慢速网络下浏览器懒加载图片的效果

完整代码如下:

    

    javascript图片懒加载实现

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

你可能感兴趣的:(javascript)