手动实现图片懒加载

最新推荐文章于 2024-04-10 10:34:13 发布

捧鲜花的唐老鸭

最新推荐文章于 2024-04-10 10:34:13 发布

阅读量170

点赞数

文章标签： css javascript html

本文链接：https://blog.csdn.net/weixin_58207509/article/details/121799700

版权

本文介绍了手动实现图片懒加载的方法，通过IntersectionObserver监听图片元素进入可视区域，以节省资源，提高页面加载速度。文章详细阐述了懒加载的基本思路，包括传统手动判断和现代浏览器API的使用，并给出了具体的实现格式示例。

摘要由CSDN通过智能技术生成

懒加载的基本思路

当dom元素进入可视区域时，才去加载它。

如何判断一个dom元素是否进入了可见区域？

- 传统：获取dom的位置，手动判断。（距离页面顶部的距离比较滚动条卷起的高度，还要考虑元素自己的高度）
- 现在：直接判断元素进入可视区域的比例

实现思路

利用浏览器提供的 IntersectionObserver，监听图片元素是否进入可视区域，进入后才真正去设置图片元素的 src 属性进行图片加载。

格式

var dom = dom元素
// 实例化一个观察者
// 它的参数1是一个回调：当被观察的目标进入视口/离开视口就会调用
var observer = new IntersectionObserver((entries)=>{
  console.log(entries[0].isIntersecting)
  console.log(entries[0].intersectionRatio)
  if(entries[0].isIntersecting) {
    
  }
}, 其他配置)

// 观察者观察dom
observer.observe(dom)
observer.disconnect()   // 停止观察者
observer.unobserve(dom) // 观察者停止对dom的观察

示例