图片懒加载

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

呈现形式

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

基本步骤

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容