懒加载的原理

(1) .懒加载的概念

对于页面有很多静态资源的情况下(比如网商购物页面),为了节省用户流量和提高页面性能,可以在用户浏览到当前资源的时候,再对资源进行请求和加载。

(2)实现原理

监听onscroll事件判断资源位置;首先为所有懒加载的静态资源添加自定义属性字段,比如如果是图片,可以指定data-src为真实的图片地址,src指向loading的图片。然后当资源进入视口的时候,将src属性值替换成data-src的值。
实现代码传送门

你可能感兴趣的:(懒加载的原理)