前端实现图片懒加载

能者

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

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

1. 在 HTML 中给所有需要懒加载的图片添加一个占位符，可以是一张简单的小图片，或者是一个透明的 DIV 元素。
[mw_shl_code=applescript,true]<im g src="placeholder.jpg" data-src="image.jpg" alt="Lazy-loaded image">
[/mw_shl_code]

2. 使用 JavaScript 监听滚动事件或其他触发条件（如页面加载完成），并判断图片是否进入可见区域。
[mw_shl_code=javascript,true]window.addEventListener('scroll', function() {
  var lazyImages = document.querySelectorAll('img[data-src]');
  
  for (var i = 0; i < lazyImages.length; i++) {
    if (isInViewport(lazyImages)) {
      lazyImages.src = lazyImages.getAttribute('data-src');
      lazyImages.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)
  );
}
[/mw_shl_code]

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

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