JavaScript两个实用的图片懒加载优化方法，8个优秀的CSS实践

// 方法一：使用IntersectionObserver实现图片懒加载
function lazyLoadImages() {
  const imgTargets = document.querySelectorAll('[data-src]');
  const imgObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.getAttribute('data-src');
        observer.unobserve(img);
      }
    });
  });
 
  imgTargets.forEach(img => {
    imgObserver.observe(img);
  });
}
 
// 方法二：使用data-src和data-srcset实现图片懒加载和响应式图片
function lazyLoadImagesWithSrcset() {
  const imgTargets = document.querySelectorAll('[data-src]');
  const imgObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        const src = img.getAttribute('data-src');
        const srcset = img.getAttribute('data-srcset');
        img.src = src;
        if (srcset) {
          img.srcset = srcset;
        }
        observer.unobserve(img);
      }
    });
  });
 
  imgTargets.forEach(img => {
    imgObserver.observe(img);
  });
}
 
// 在页面加载时调用方法
document.addEventListener('DOMContentLoaded', lazyLoadImages);

这段代码定义了两个函数lazyLoadImages和lazyLoadImagesWithSrcset，它们使用IntersectionObserver来监听可见性变化，并在图片进入视口时将data-src或data-srcset中的URL设置到src或srcset属性中，从而实现图片的懒加载和响应式处理。在页面加载时，这两个函数会被监听DOMContentLoaded事件触发后调用。