发现

任务

客服工单

发文章

图片懒加载

源码 2024-10-8 02:44:47 121 0 来自 中国
懒加载，通常是耽误加载初始视口外的图像，直到我们滚动页面，到达图像与底部视口的交汇处才开始加载图像。
我们须要做的是判断图片是否出现在当前视口，然后控制图片的加载。
有几种实现方式：

  • scroll 和位置盘算
  • getBoundingClientRect API
  • IntersectionObserver API
  • loading 属性
  • 第三方库（无非是上述方法的实现）
scroll 和位置盘算

我们须要利用 clientTop、offsetTop、clientHeight 和 scrollTop 盘算图片位置。
关于这些属性的相干内容请检察元素巨细和滚动。
大抵的代码如下：

举报

您需要登录后才可以回帖 登录 | 立即注册
源码
优秀作者 助人为乐 人气作者
文章
382
问答
382
粉丝
0

所属分类: 问答交流

Powered by CangBaoKu v1.0 小黑屋藏宝库It社区( 冀ICP备14008649号 )

GMT+8, 2024-11-21 18:00, Processed in 0.147325 second(s), 32 queries.© 2003-2025 cbk Team.

快速回复 返回顶部 返回列表