javascript - 响应图像 : set sizes attribute from JavaScript

Question

可以从 JavaScript 设置 srcset 属性以实现响应式延迟加载图像。

但是，设置sizes 属性似乎不起作用。在 HTML 中编码 sizes 按预期工作，但是当我尝试从 JavaScript 设置 sizes 属性时(如下面的代码)它没有效果:选择的图像匹配视口(viewport)宽度并且不遵循 sizes 提示。

这是设计使然，还是只是没有实现？

示例代码如下。

const BASE_URL = 'https://res.cloudinary.com/foobar/f_auto,dpr_auto,q_auto:eco/';

const SIZES = {
  0: 'calc(100vw - 60px)',
  420: 'calc((100vw - 90px) / 2)',
  750: 'calc((100vw - 120px) / 3)',
  1200: 'calc((100vw - 150px) / 4)'
}

const WIDTHS = [500, 1000, 1500];

const options = {
  rootMargin: '0px 0px 100px 0px',
};

function callback(entries) {
  for (const entry of entries) {
    if (entry.isIntersecting) {
      const lazyImage = entry.target;
      const id = lazyImage.dataset.id;
      lazyImage.sizes = getSizes();
      lazyImage.srcset = getSrcset(id);
      io.unobserve(lazyImage);
    }
  }
}

function getSrcset(id) {
  const srcset = [];
  for (const width of WIDTHS) {
    srcset.push(`${BASE_URL}w_${width}/${id}.jpg ${width}w`);
  }
  return srcset.join(',');
}

function getSizes() {
  const sizes = [];
  for (const size in SIZES) {
    sizes.push(`(min-width: ${size}px) ${SIZES[size]}`);
  }
  return sizes.join(',');
}

const images = document.querySelectorAll('img.lazy');

let io;
if (window.IntersectionObserver) {
  io = new IntersectionObserver(callback, options);
}

for (const image of images) {
  if (window.IntersectionObserver) {
    io.observe(image);
  } else {
    console.log('Intersection Observer not supported');
    image.src = BASE_URL + image.getAttribute('data-id' + '.jpg');
  }
}

Answer 1

我运行了您的示例，它工作正常，符合我的预期。

可能是尺寸的编码方式有问题。
我认为放置 min-width: 0px 媒体条件不是一个好主意，因为它将始终被选中，而所有其他条件将被忽略。

从这里https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

The browser ignores everything after the first matching condition, so be careful how you order the media conditions.