怎么实现对图片的懒加载

第一步：使用HTML结构

• 为需要懒加载的图片设置一个占位的容器，通常是一个 <div> 或 <span> 元素，并设置一个特定的 class 名，用于标识懒加载的元素。
• 在这个容器中，可以放置一个占位的图片或者一个简单的加载提示图标。

例如：

<div class="lazy-load-image">
  <img data-src="your-image-url.jpg" alt="Your Image Description">
</div>

第二步：使用 JavaScript 实现懒加载

• 在页面加载时，通过 JavaScript 获取所有带有特定 class 名的懒加载元素。
• 监听页面的滚动事件，当懒加载元素进入可视区域时，将其 data-src 属性的值赋给 src 属性，从而触发图片的加载。

以下是一个简单的 JavaScript 实现示例：

// 获取所有需要懒加载的元素
const lazyImages = document.querySelectorAll('.lazy-load-image img');

function checkVisibility() {
  lazyImages.forEach(image => {
    const rect = image.getBoundingClientRect();
    const isVisible = rect.top < window.innerHeight && rect.bottom > 0;
    if (isVisible) {
      // 当元素进入可视区域时，加载图片
      image.src = image.dataset.src;
      // 加载完成后可以移除懒加载的类名或者进行其他处理
      image.classList.remove('lazy-load-image');
    }
  });
}

// 监听滚动事件
window.addEventListener('scroll', checkVisibility);
// 页面加载完成后也检查一次
window.addEventListener('load', checkVisibility);