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

<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)
  );
}