IntersectionObserver懒加载srcset图片无法自适应分辨率问题

我用IntersectionObserver配合data-srcset实现图片懒加载，但图片没法根据屏幕分辨率正确适配——浏览器每次都选450px宽的最大尺寸，完全忽略100px、200px、300px、400px这些规格。以下是我的懒加载JS代码、HTML结构：

懒加载JS代码 #

const images = document.querySelectorAll('img[data-src]');
const config = {
  rootMargin: '50px 0px',
  threshold: 0.01
};

let observer;

if ('IntersectionObserver' in window) {
  observer = new IntersectionObserver(onChange, config);
  images.forEach(img => observer.observe(img));
} else {
  console.log('%cIntersection Observers not supported', 'color: red');
  images.forEach(image => loadImage(image));
}

const loadImage = image => {
  image.classList.add('fade-in');
  image.src = image.dataset.src;
  image.srcset = image.dataset.srcset;
}

function onChange(changes, observer) {
  changes.forEach(change => {
    if (change.intersectionRatio > 0) {
      // Stop watching and load the image
      loadImage(change.target);
      observer.unobserve(change.target);
    }
    
  });
}

HTML结构 #

<img class="img-fluid"
src="data:image/webp;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="https://ik.imagekit.io/amalgama/usuarios/administradores/admin/artigos/thumb/7-passos-para-sair-das-dividas-e-se-tornar-um-empreendedor.webp?tr=w-100"
alt="bla bla bla"
title="bla bla bla"
data-srcset="https://ik.imagekit.io/amalgama/usuarios/administradores/admin/artigos/thumb/7-passos-para-sair-das-dividas-e-se-tornar-um-empreendedor.webp?tr=w-100 100w,
https://ik.imagekit.io/amalgama/usuarios/administradores/admin/artigos/thumb/7-passos-para-sair-das-dividas-e-se-tornar-um-empreendedor.webp?tr=w-200 200w,
https://ik.imagekit.io/amalgama/usuarios/administradores/admin/artigos/thumb/7-passos-para-sair-das-dividas-e-se-tornar-um-empreendedor.webp?tr=w-300 300w,
https://ik.imagekit.io/amalgama/usuarios/administradores/admin/artigos/thumb/7-passos-para-sair-das-dividas-e-se-tornar-um-empreendedor.webp?tr=w-400 400w,
https://ik.imagekit.io/amalgama/usuarios/administradores/admin/artigos/thumb/7-passos-para-sair-das-dividas-e-se-tornar-um-empreendedor.webp?tr=w-450 450w"
width="450px"
height="278px">

问题原因&解决方案 #

核心原因 #

1. HTML固定宽度属性干扰：img标签的width="450px"会让浏览器判定图片的渲染宽度始终为450px，无论容器或屏幕尺寸如何，因此直接匹配srcset中最大的450w资源。
2. 缺少sizes属性：浏览器需要sizes属性明确不同视口下图片的显示宽度规则，否则会默认以图片的固有宽度（或HTML设置的宽度）为基准选择资源。
3. src与srcset设置顺序问题：先设置src再设置srcset，部分浏览器会优先加载已指定的src资源，或干扰srcset的优先级判断。

修复步骤 #

1. 移除HTML的width/height属性：
   删除img标签里的width="450px"和height="278px"，让img-fluid类的响应式样式（max-width:100%; height:auto;）生效，图片会自适应容器宽度。

2. 添加sizes属性：
   在img标签中加入sizes，定义不同视口下的图片显示宽度，示例：

   sizes="(max-width: 576px) 100vw, (max-width: 768px) 50vw, 450px"
   

   规则说明：

   • 视口≤576px时，图片占满整个视口宽度
   • 576px<视口≤768px时，图片占视口宽度的50%
   • 视口>768px时，图片固定为450px宽

3. 调整loadImage函数的赋值顺序：
   先设置srcset再设置src，确保srcset优先生效，src作为降级方案：

   const loadImage = image => {
     image.classList.add('fade-in');
     image.srcset = image.dataset.srcset;
     image.src = image.dataset.src;
   }
   

4. 验证响应式样式：
   检查img-fluid类的CSS是否正常加载，确保没有其他自定义样式覆盖max-width:100%和height:auto规则。

内容的提问来源于stack exchange，提问作者Sophie