介绍图片懒加载的几种实现方法

在 JavaScript 中，懒加载（Lazy Loading）主要用于延迟加载资源，例如图片、视频、音频、脚本等，直到它们真正需要时才加载。这样可以提高页面的加载速度和性能。

以下是几种常见的 JavaScript 懒加载实现方式：

1. 监听滚动事件

通过监听滚动事件来实现图片懒加载是一种传统并且常见的方法，但这种方法在性能上不是很好。

1. 标记页面上哪些图片需要懒加载，使用自定义属性。

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

2.监听滚动事件

window.addEventListener('scroll', lazyLoad);

3. 确定哪些元素已经滚动到了视口内或即将进入视口，需要被加载。 

function lazyLoad() {
  const lazyImages = [...document.querySelectorAll('.lazy')].filter(isImageInView);  
  lazyImages.forEach(loadImage);  
}  
  
function isImageInView(img) {  
  const rect = img.getBoundingClientRect();  
  return rect.top < window.innerHeight + window.pageYOffset;  
}

function loadImage(img) {  
  img.src = img.dataset.src; // 使用data-src属性中的真实图片地址  
  img.classList.remove('lazy'); // 移除懒加载类，避免重复加载 
}

4. 注意一点，在页面刚加载时，可能有一些元素已经出在视口内，需要立即加载这些元素，而不仅仅是等待滚动事件。因此在文档加载完成后，立即调用一次 lazyLoad