前端实现图片懒加载

能者

图片懒加载是一种优化网页性能的技术，它延迟加载页面中的图片，只有当图片进入可见区域时才加载。

以下是实现图片懒加载的基本步骤：

1. 在 HTML 中给所有需要懒加载的图片添加一个占位符，可以是一张简单的小图片，或者是一个透明的 DIV 元素。

[AppleScript] 纯文本查看 复制代码

<im g src="placeholder.jpg" data-src="image.jpg" alt="Lazy-loaded image">

2. 使用 JavaScript 监听滚动事件或其他触发条件（如页面加载完成），并判断图片是否进入可见区域。

[JavaScript] 纯文本查看 复制代码

window.addEventListener('scroll', function() {
  var lazyImages = document.querySelectorAll('img[data-src]');
  
  for (var i = 0; i < lazyImages.length; i++) {
    if (isInViewport(lazyImages[i])) {
      lazyImages[i].src = lazyImages[i].getAttribute('data-src');
      lazyImages[i].removeAttribute('data-src');
    }
  }
});

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

3. 当图片进入可见区域后，将 `data-src` 属性的值赋给 `src` 属性，以此来加载真实的图片资源。

这样就实现了图片懒加载。通过延迟加载图片，可以减少页面的加载时间，提高用户体验。需要注意的是，为了确保懒加载正常工作，建议在页面加载完成后才执行懒加载脚本。