手写代码实现图片的懒加载

 

介绍

无论在PC端的网页中还是在移动端的网页中，都经常要用到图片资源，很多时候一张图片的大小甚至比一个插件库还要大，这就会造成页面加载缓慢，同时需要消耗较大的流量，而往往页面中不止一张图片，正常情况下，浏览器会从上到下解析并加载图片资源。这时候即使用户不向下滚动页面，那些你还没看到的图片其实也已经被加载了，相当于白白浪费了流量。

因此我们希望图片可以按需加载，也就是说当我将页面滚动到有图片的地方时再显示图片，否则就不显示，这样一来就可以加快页面的加载速度，同时也节省了流量，这种按需加载图片的方式就称之为图片的懒加载。

平时工作中我们更多的是用第三方插件或者框架中的懒加载来完成这个功能，实现原理其实非常简单：在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载即可。