图片懒加载

1 .图片延迟加载也称为懒加载,延迟加载图片或符合某些条件才加载某些图片,通常用于图片比较多的网页,可以减少请求数或者延迟请求数。

呈现形式

1 .延时加载,使用setTimeout或者setInterval进行延迟加载,如果用户在加载前离开,自然不会进行加载。
2 .条件加载,符合某些条件或者触发了某些条件才开始异步加载。
3 .可视区域加载,仅仅加载用户看到的区域,这个是主要监控滚动条来实现,一般距离用户看到的底边很近的时候开始加载,这样就能保证用户下拉时图片正好接上,不会有太长时间的停顿。

基本步骤

1 .一开始网页中的图片都设为同一张图片
2 .给图片增加data-original='image/test.jpg',保存图片真实的地址。
3 .当触发到某些条件时,自动改变该区域的图片的src属性为真实的地址。
4 .

你可能感兴趣的:(图片懒加载)