用JavaScript实现懒加载

懒加载（Lazy Loading）是一种优化网页性能的技术，它可以在页面加载完毕后，延迟加载一些不是必要的资源，比如图片、视频等，从而减少页面的加载时间，提高用户的体验。

下面是用 JavaScript 实现懒加载的简单示例：

首先，我们需要在 HTML 中将需要延迟加载的资源（比如图片）的 `src` 属性替换为 `data-src` 属性，如下所示：

<img data-src="path/to/image.jpg">

接下来，我们需要编写 JavaScript 代码来实现懒加载。具体实现步骤如下：

1. 获取所有需要延迟加载的元素
2. 监听滚动事件，当元素出现在视口内时，动态加载资源
3. 将 `data-src` 属性的值赋给 `src` 属性

下面是完整的 JavaScript 代码：

window.addEventListener('DOMContentLoaded', function() {
  const lazyImages = document.querySelectorAll('img[data-src]');
  const windowHeight = window.innerHeight;

  function lazyLoad() {
    lazyImages.forEach(image => {
      const imageTop = image.getBoundingClientRect().top;
      if (imageTop < windowHeight) {
        image.src = image.dataset.src;
        image.removeAttribute('data-src');
      }
    });
  }

  window.addEventListener('scroll', lazyLoad);
  window.addEventListener('resize', lazyLoad);
});

在这段代码中，我们首先使用 `document.querySelectorAll` 获取所有带有 `data-src` 属性的图片元素。接着，我们获取浏览器窗口的高度，并定义 `lazyLoad` 函数，用于实现懒加载。在 `lazyLoad` 函数中，我们遍历所有需要延迟加载的图片元素，并使用 `getBoundingClientRect()` 方法获取元素的位置信息。如果元素的顶部位置小于浏览器窗口的高度，就将 `data-src` 属性的值赋给 `src` 属性，并移除 `data-src` 属性。

最后，我们监听 `scroll` 和 `resize` 事件，当页面滚动或窗口大小发生变化时，重新执行 `lazyLoad` 函数，以确保所有需要延迟加载的元素都能被正确加载。

注意：以上代码仅为示例，实际应用中需要根据具体情况进行修改。