html+css+js实现图片懒加载

图片懒加载可以通过以下步骤实现：

1. 在 HTML 中，将图片的 src 属性设置为一个占位符或者空值，例如：

<img src="placeholder.jpg" data-src="real-image.jpg" />

2. 在 CSS 中，为占位符图片设置宽度和高度，以确保页面布局不会因为图片加载而改变：

img {
  width: 100%;
  height: auto;
}

3. 在 JavaScript 中，监听滚动事件，当图片进入可视区域时，将 data-src 属性的值赋给 src 属性，实现图片的懒加载：

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

这样，当用户滚动页面时，图片会在进入可视区域时才被加载，从而加快页面加载速度。