延迟加载

懒加载的做用:为了提高用户体验

当网页中的资源(css,img)不少状况下是须要的全部资源下载完成后再显示网页,等待时间过长。

须要将暂时不显示在视口范围内的图片不加载当滚动条到视口的范围再加载

思路:首先给img设置一个自定义属性节点。

1.例如<img    data-src='图片路径'>  src=''原src的属性能够设置一个加载动画图片.css

2.给document添加onscroll事件,获取scrollTop属性,即浏览器滚动条已滚动的高度,获取img的offsetTop属性值.浏览器

3若是scrollTop>offsetTop,说明<img>须要显示了动画

4.使用js将src属性值替换data-src属性值spa

相关文章
相关标签/搜索