更快的响应式图片加载与大规模加载优化方案

2024-02-01 02:31:54

都1202年了，还在使用JS做图片响应式么？

1. 使用 `picture` 标签

HTML picture 元素允许你为同一张图片指定多个不同的源，浏览器会根据设备的屏幕尺寸和像素密度来选择最合适的源。这是实现响应式图片的最简单方法，也是最推荐的方法。

<picture>
  <source srcset="image-small.jpg" media="(max-width: 480px)">
  <source srcset="image-medium.jpg" media="(min-width: 481px) and (max-width: 800px)">
  <source srcset="image-large.jpg" media="(min-width: 801px)">
  <img src="image-small.jpg" alt="Image of a cat">
</picture>

2. 使用CSS `object-fit` 属性

CSS object-fit 属性可以用来控制元素的内容如何适应其父元素的可用空间。这个属性可以用来实现响应式图片，但要注意它只支持现代浏览器。

.image {
  object-fit: contain;
}

3. 使用JavaScript

JavaScript 可以用来实现响应式图片，但这不是一个好的选择。它不仅会减慢页面的加载速度，还会增加代码的复杂性。不过，如果你必须使用JavaScript来实现响应式图片，那么你可以使用以下代码：

function responsiveImage(image) {
  var width = image.clientWidth;
  if (width < 480) {
    image.src = "image-small.jpg";
  } else if (width < 800) {
    image.src = "image-medium.jpg";
  } else {
    image.src = "image-large.jpg";
  }
}

window.addEventListener("resize", function() {
  var images = document.querySelectorAll("img");
  for (var i = 0; i < images.length; i++) {
    responsiveImage(images[i]);
  }
});