js懒加载

懒加载（Lazy Loading）是一种在网页加载过程中延迟加载某些资源的技术。在JavaScript中实现懒加载的方式有很多，下面是其中一种简单的实现方式：
1. 首先，给需要懒加载的元素添加一个特定的class（例如"lazy"）和一个data-src属性，该属性用于保存真实的图片地址：
```html
<img class="lazy" data-src="path/to/image.jpg" alt="Lazy Loaded Image">
```
2. 接下来，在JavaScript中定义一个函数来实现懒加载的效果：
```javascript
function lazyLoad() {
  const lazyImages = document.querySelectorAll('.lazy'); // 获取所有需要懒加载的元素
  lazyImages.forEach(image => {
    const imageTop = image.offsetTop; // 图片距离页面顶部的距离
    const imageBottom = imageTop + image.offsetHeight; // 图片底部距离页面顶部的距离
    // 如果图片底部位于页面可见区域内，则加载图片
    if (window.pageYOffset < imageBottom && window.innerHeight > imageTop) {
      image.src = image.dataset.src;
      image.classList.remove('lazy'); // 加载完成后移除lazy class
    }
  });
}
// 当页面滚动时触发lazyLoad函数
window.addEventListener('scroll', lazyLoad);
```
3. 最后，可以通过调用lazyLoad函数来初始化页面加载时的懒加载效果：
```javascript
lazyLoad();
```
使用懒加载可以有效降低网页的初始加载时间，提升用户的浏览体验。当图片位于浏览器可见区域时才加载，避免了一次性加载过多的图片资源。