JS如何实现图片懒加载_JavaScript图片延迟加载优化与实现方法详解

<img class="lazy"  src="/images/placeholder.png" alt="示例图片">

function lazyLoad() {
  const images = document.querySelectorAll('img.lazy');
  const windowHeight = window.innerHeight;

  images.forEach(img => {
    const rect = img.getBoundingClientRect();
    // 图片顶部距离视口顶部小于窗口高度，且尚未加载
    if (rect.top <= windowHeight && !img.src.includes(img.dataset.src)) {
      img.src = img.dataset.src;
      img.classList.remove('lazy'); // 可选：标记已加载
    }
  });
}

// 初始化调用一次，防止首屏图片未触发滚动
lazyLoad();
window.addEventListener('scroll', lazyLoad);

function throttle(fn, delay) {
  let flag = true;
  return function () {
    if (!flag) return;
    flag = false;
    setTimeout(() => {
      fn.apply(this, arguments);
      flag = true;
    }, delay);
  };
}

window.addEventListener('scroll', throttle(lazyLoad, 100));

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.remove('lazy');
      observer.unobserve(img); // 加载后停止监听
    }
  });
});

// 观察所有懒加载图片
document.querySelectorAll('img.lazy').forEach(img => {
  observer.observe(img);
});

img.lazy {
  opacity: 0.5;
  transition: opacity 0.3s ease-in;
}
img:not(.lazy) {
  opacity: 1;
}