js实现前端图片懒加载源码
js实现前端图片懒加载源码,载入 JavaScript 文件,希望对你有帮助,也欢迎各位编程大咖 拍砖。
js实现前端图片懒加载源码
//——————–JS———————//
使用方法
载入 JavaScript 文件
//——————–html———————//
注意事项:
需要真正实现图片延迟加载,必须将真实图片地址写在 data-src 属性中。若 src 与 data-src 相同,则只是一个特效而已,并不达到延迟加载的功能。
修改 HTML 代码中需要延迟加载的 IMG 标签
<!–
将真实图片地址写在 data-src 属性中,而 src 属性中的图片换成占位符的图片(例如 1×1 像素的灰色图片或者 loading 的 gif 图片)
添加 class=”lazy” 用于区别哪些图片需要延时加载,当然你也可以换成别的关键词。
–>
<img src=”images/lazy.gif” data-src=”product/1.jpg” alt=”” class=”lazy”>
希望对你有帮助,也欢迎各位编程大咖 拍砖。
作者:Lzb
更新时间: 2022-09-08
本文地址:https://www.lzb6.com/website/program/125.html
版权所有 © 转载时必须以链接形式注明作者和原始出处!