懒加载的作用:为了提升用户体验
当网页中的资源(css,img)很多情况下是需要的所有资源下载完成后再显示网页,等待时间过长。
需要将暂时不显示在视口范围内的图片不加载当滚动条到视口的范围再加载
思路:首先给img设置一个自定义属性节点。
1.例如<img data-src='图片路径'> src=''原src的属性可以设置一个加载动画图片.
2.给document添加onscroll事件,获取scrollTop属性,即浏览器滚动条已滚动的高度,获取img的offsetTop属性值.
3如果scrollTop>offsetTop,说明<img>需要显示了
4.使用js将src属性值替换data-src属性值