如何用<picture>元素在视口超指定宽度时停止图片下载？

你的问题其实是浏览器资源预加载机制和<picture>元素的行为导致的，我来帮你拆解原因并给出可行的解决方案：

为什么当前方案会出现问题？ #

1. CSS隐藏无法阻止预加载：浏览器在解析HTML时，会优先发起图片资源请求，不管后续CSS是否会隐藏这个元素。当你把视口缩小到900px以下再放大时，浏览器会重新评估<picture>的媒体查询条件，发现source不匹配后，就会加载<img>的fallback资源（也就是你的transparent.png）。
2. IE9的兼容性问题：IE9完全不支持<picture>和srcset属性，它会直接忽略<source>标签，然后尝试解析<img>元素——如果你的<img>带有srcset，IE9可能会错误地将其当作src来加载，导致transparent.png被下载。

解决方案一：用JavaScript动态控制图片加载（推荐） #

这种方式能完全避免不必要的资源请求，只有在需要的时候才创建图片元素并加载资源：

代码示例： #

<!-- 用容器代替原来的picture -->
<div class="picture-container"></div>

<script>
function handlePictureLoad() {
  const container = document.querySelector('.picture-container');
  const isViewportSmall = window.innerWidth <= 900;

  if (isViewportSmall) {
    // 视口<=900px时，创建picture元素并插入
    if (!container.querySelector('picture')) {
      const picture = document.createElement('picture');
      const source = document.createElement('source');
      source.type = 'image/png';
      source.srcset = 'image.png';
      source.media = '(max-width: 900px)';

      const img = document.createElement('img');
      img.src = 'image.png'; // 给不支持srcset的浏览器降级
      img.alt = '描述你的图片内容'; // 别忘了添加有意义的alt文本

      picture.appendChild(source);
      picture.appendChild(img);
      container.appendChild(picture);
    }
  } else {
    // 视口>900px时，清空容器，不加载任何图片
    container.innerHTML = '';
  }
}

// 页面初始化时执行一次
handlePictureLoad();

// 监听视口变化，添加防抖避免频繁触发
let resizeTimer;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(handlePictureLoad, 200);
});
</script>

这个方案的优势是：

• 只有当视口真正需要图片时才会加载，完全杜绝不必要的请求
• 兼容IE9，因为IE9支持基础的DOM操作和resize事件

解决方案二：用Data URI作为Fallback（纯HTML/CSS方案） #

如果不想引入JavaScript，可以把<img>的fallback资源换成内嵌的透明图片（Data URI），这样即使浏览器加载它，也不会产生额外的HTTP请求：

修改后的HTML： #

<picture>
  <source type="image/png" srcset="image.png" media="(max-width: 900px)">
  <!-- 用内嵌的1px透明GIF代替外部的transparent.png -->
  <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="">
</picture>

CSS保持不变： #

@media (min-width: 900px) {
  picture { display: none; }
}

这个方案的优点是简单，不需要JS，但要注意：

• 视口从<900px变回>900px时，浏览器还是会加载这个Data URI，但因为是内嵌资源，没有HTTP请求，所以不会有性能问题
• IE9会加载这个内嵌资源，也不会产生额外请求，解决了兼容性问题

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