**图片懒加载怎么做的**

图片懒加载是一种优化网页性能的方式，它可以减少初次加载时需要下载的图片数量和页面加载时间。具体实现方式如下：

1. 将页面中所有需要懒加载的图片的src属性设置为一个占位符，比如data-src。

2. 使用JavaScript监听滚动事件，当图片出现在视口中时，将图片的data-src属性的值赋给src属性，实现图片的加载。

以下是一个简单的示例代码：

<img data-src="image.jpg" width="500" height="500">

function lazyLoad() {
  const images = document.querySelectorAll('img[data-src]');
  const windowHeight = window.innerHeight;
  
  images.forEach(img => {
    const rect = img.getBoundingClientRect();
    if (rect.top < windowHeight) {
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
    }
  });
}

window.addEventListener('scroll', lazyLoad);

在这个示例中，我们首先获取所有带有data-src属性的图片元素，然后在滚动事件回调函数中遍历这些图片，当图片的位置进入视口时，将data-src属性的值赋给src属性，实现图片的加载。