图片懒加载Demo

相关知识：

【js获取元素位置+元素大小】全面总结

 场景：

包含大量图片的页面，并发加载最大量图片，会有性能 / 移动端流量问题

 

思路：

看到图片再加载

 

方案：

1.初始图片src属性不加，加一个data-src属性

2.判断scrollTop，offsetTop，clientHeight的关系

元素的总offsetTop < 页面的scrollTop + 页面的clientHeight

 

3.当满足一定关系，将data-src属性转换成src属性

4.组装

 

 

github源码

在线演示