图片懒加载总结

图片懒加载是一种优化网页性能的技术，它延迟加载页面上的图片，直到它们进入用户的可视区域时才加载。这样可以减少页面首次加载时的 HTTP 请求数量，从而加快页面加载速度。

常见的图片懒加载方式

基于 `Intersection Observer API` 的懒加载

原理： 使用 Intersection Observer API 监听图片元素是否进入可视区域，当图片元素进入可视区域时才加载真实的图片 URL。

优点： 这是最现代和推荐的懒加载方式，性能好、精度高、易于使用。


const lazyLoadImages = document.querySelectorAll('.lazy-load');

const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            const src = img.getAttribute('data-src');
            img.setAttribute('src', src);
            observer.unobserve(img);
        }
    });
});

lazyLoadImages.forEach(img => {
    observer.observe(img);
});

基于 `scroll` 事件监听的懒加载

原理： 监听页面的 scroll 事件，每次滚动时检查图片是否进入可视区域，当图片进入可视区域时才加载真实的图片 URL。

优点： 兼容性好，支持所有浏览器。

缺点： 性能稍差，频繁的 scroll 事件可能会影响性能。


const lazyLoadImages = document.querySelectorAll('.lazy-load');

function lazyLoad() {
  lazyLoadImages.forEach(img => {
    if (isInViewport(img)) {
        const src = img.getAttribute('data-src');
          img.setAttribute('src', src);
    }
  })
}

function isInViewport(element) {
    const rect = element.getBoundingClientRect();
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

window.addEventListener('scroll', lazyLoad);
window.addEventListener('load',lazyLoad)

基于 `data-*` 属性的懒加载

原理： 使用 data-* 属性存储真实的图片 URL，当图片进入可视区域时，将 data-* 属性的值赋值给 src 属性，触发图片加载。

优点： 简单易用。

缺点： 需要额外的 JavaScript 代码来处理。


const lazyLoadImages = document.querySelectorAll('.lazy-load');
function loadImage(img) {
  const src = img.getAttribute('data-src');
  img.setAttribute('src', src)
}
function lazyLoad() {
  lazyLoadImages.forEach(img => {
    if (isInViewport(img)) {
       loadImage(img);
    }
  })
}

function isInViewport(element) {
    const rect = element.getBoundingClientRect();
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

window.addEventListener('scroll', lazyLoad);
window.addEventListener('load',lazyLoad)

目录导航

图片懒加载

预览结果：