如何实现网页的懒加载？图片懒加载的原理

图片懒加载的原理如下：

1. 在网页中将需要懒加载的图片的src属性替换为一个占位符，例如一个空白的透明图片或者一个loading图标。

2. 使用JavaScript监听滚动事件，判断用户是否滚动到需要显示图片的位置。

3. 当用户滚动到相应位置时，获取图片的真实地址，将其赋值给src属性，从而触发图片的加载。 

<img class="lazy" data-src="image.jpg" src="placeholder.jpg">

// 获取所有具有.lazy类的图片元素
const lazyImages = document.querySelectorAll('.lazy');

// 监听滚动事件
window.addEventListener('scroll', lazyLoad);

function lazyLoad() {
  // 遍历每个需要进行懒加载的图片
  for (const lazyImage of lazyImages) {
    if (elementInViewport(lazyImage)) {
      // 将data-src属性的值赋值给src属性，触发图片加载
      lazyImage.src = lazyImage.dataset.src;
      // 移除.lazy类，避免重复加载
      lazyImage.classList.remove('lazy');
    }
  }
}

function elementInViewport(element) {
  const rect = element.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

 通过获取具有.lazy类的图片元素集合，并使用scroll事件监听用户滚动行为。当图片进入可视区域时，将data-src属性的值赋给src属性，触发图片加载。