JavaScript实现懒加载的两种主流方案与四步法详解

<img class="lazy" data-src="image.jpg" alt="Lazy-loaded Image">

// 观察器选项
const options = {
  root: null, // 默认为视窗
  rootMargin: '0px',
  threshold: 0.5 // 当目标元素50%可见时触发加载
};
const handleIntersection = (entries,) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
 // 加载目标元素
      const target = entry.target;
      target.src = target.dataset.src;
      observer.unobserve(target);
    }
  });
};
// 创建一个观察器实例
const observer = new IntersectionObserver(handleIntersection, options);
// 找到所有需要懒加载的元素并进行观察
const lazyElements = document.querySelectorAll('.lazy');
lazyElements.forEach(element => {
  observer.observe(element);
});

<img src="placeholder.jpg" data-src="image-to-lazy-load.jpg" alt="Lazy-loaded Image">

window.addEventListener('scroll', function() {
  // 判断懒加载图片是否进入可视区域
  // 如果图片进入可视区域，则触发加载图片的函数
});

function lazyLoad() {
  const lazyImages = document.querySelectorAll('img[data-src]');
  lazyImages.forEach(function(img) {
    if (isInViewport(img)) {
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
    }
  });
}
function isInViewport(element) {
  var rect = element.getBoundingClientRect();
  return (
    rect.bottom >= 0 &&
    rect.right >= 0 &&
    rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.left <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

window.addEventListener('scroll', function() {
  lazyLoad();
});