很多页面，内容很丰富，页面很长，图片较多。比如说各种商城页面。这些页面图片数量多，而且比较大，少说百来K，多则上兆。要是页面载入就一次性加载完毕，时间消耗很大，同时也比较浪费资源。

懒加载也就是延迟加载，可以很好解决页面图片加载的问题。

原理：

页面中的img元素，如果没有src属性，浏览器就不会发出请求下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。当访问一个页面的时候，先把img元素或是背景图片路径替换成一张大小为1*1像素图片的路径（只需请求一次，俗称占位图），把正真的路径存在元素的data-original属性(此属性是自己设置的)，只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。

实现步骤：

(1)首先，不要将图片地址放到src属性中，src中可以放预加载的小图片，真正的图片路径放到其它属性(data-original)中。

(2)页面加载完成后，根据scrollTop判断图片是否在用户的视野内，如果在，则将data-original属性中的值取出存放到src属性中。

(3)在滚动事件中重复判断图片是否进入视野，如果进入，则将data-original属性中的值取出存放到src属性中。

优点

页面加载速度快、可以减轻服务器的压力、节约了流量,用户体验好.

远近互联前端小王整理发布，希望能对学习技术的你有所帮助

远近互联专业提供网站建设、APP开发、网站优化、外贸网站SEO、微信运营的品牌整合营销服务让客户通过网络品牌建立与网络传播提高业绩。