相关知识:

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

 场景:

包含大量图片的页面,并发加载最大量图片,会有性能 / 移动端流量问题
 
思路:
看到图片再加载
 
方案:
1.初始图片src属性不加,加一个data-src属性
2.判断scrollTop,offsetTop,clientHeight的关系
元素的offsetTop < 页面的scrollTop + 页面的clientHeight
图片懒加载Demo
 
3.当满足一定关系,将data-src属性转换成src属性
图片懒加载Demo
4.组装
图片懒加载Demo
 
图片懒加载Demo
 
github源码
在线演示

相关文章:

  • 2022-12-23
猜你喜欢
  • 2022-02-12
  • 2021-12-01
相关资源
相似解决方案