浏览器5大观察器助力图片懒加载

前端

2024-01-07 19:45:51

在网络不断发展的今天，网站的加载速度变得越来越重要。图片作为网站中的重要元素，其加载速度直接影响用户的体验。图片懒加载技术应运而生，它可以推迟非立即需要的图片加载，从而提升网站的加载速度。

本文将介绍5种浏览器提供的观察器，它们可以帮助我们实现图片懒加载功能，让你的网站飞起来！

1. IntersectionObserver

IntersectionObserver是W3C推荐的，用于观察目标元素与视口之间的相交情况。当目标元素进入或离开视口时，它会触发回调函数。我们可以利用这个特性，在目标元素进入视口时加载图片。

2. MutationObserver

MutationObserver用于观察DOM的变化，包括元素的增加、删除和修改。我们可以利用这个特性，在图片元素被添加到DOM中时加载图片。

3. ResizeObserver

ResizeObserver用于观察目标元素的大小变化。我们可以利用这个特性，在目标元素的大小发生变化时加载图片。

4. PerformanceObserver

PerformanceObserver用于观察浏览器的性能指标，包括资源加载时间、页面加载时间等。我们可以利用这个特性，在页面加载完成后加载图片。

5. MutationRecords

MutationRecords是MutationObserver返回的对象，它记录了DOM中发生的具体变化。我们可以利用这个特性，获取图片元素的父元素，并在父元素发生变化时加载图片。

案例：使用IntersectionObserver实现图片懒加载

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const image = entry.target;
      image.src = image.dataset.src;
      observer.unobserve(image);
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(image => {
  observer.observe(image);
});