怎么让图片懒加载的大小按照图片大小决定

要实现懒加载的大小按照图片大小决定，可以采用以下步骤：

1. 给图片设置一个占位符，例如一个空白的 div，宽度和高度与图片的原始大小一致，同时将图片的原始 URL 存储在 data 属性中。

2. 使用 JavaScript 监听页面的滚动事件，当图片进入可视区域时，获取图片的 data 属性中的 URL，将其赋值给图片的 src 属性，实现图片加载。

3. 为了让图片在加载时能够按照原始大小显示，可以在图片加载完成后，获取图片的原始宽度和高度，然后将图片的 width 和 height 属性设置为这些值。

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

<div class="lazy-image" data-src="image.jpg" style="width: 500px; height: 500px;"></div>

const lazyImages = document.querySelectorAll('.lazy-image');

function lazyLoad() {
  lazyImages.forEach(image => {
    const imageTop = image.getBoundingClientRect().top;
    const windowHeight = window.innerHeight;

    if (imageTop < windowHeight) {
      image.style.backgroundImage = `url(${image.dataset.src})`;
      image.addEventListener('load', () => {
        const imageWidth = image.naturalWidth;
        const imageHeight = image.naturalHeight;
        image.style.width = `${imageWidth}px`;
        image.style.height = `${imageHeight}px`;
      });
    }
  });
}

window.addEventListener('load', lazyLoad);
window.addEventListener('scroll', lazyLoad);

这段代码会在页面加载完成和滚动时触发 lazyLoad 函数，该函数会检查每个 lazy-image 元素是否进入可视区域，如果是，则将其背景图片设置为 data-src 属性中指定的 URL，并在图片加载完成后，将图片的 width 和 height 属性设置为原始宽度和高度。