图片懒加载
设计一个 H5 页面的图片懒加载功能
要点
第一,<img>
要使用 data-src
(或其他属性)记录 src 。还有,loading.gif 要自定义,要配合实际图片的尺寸。
<img src="./img/loading.gif" data-src="./img/animal1.jpeg"/>
第二,可以使用 Element.getBoundingClientRect()
来判断当前元素的位置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LQqPDZq9-1689086804154)(./img/rect.png)]
第三,页面滚动实时计算,注意节流
实现
代码参考 img-lazy-load.html