HTML5 <picture>元素IE10兼容及fallback降级方案咨询

嘿，这个场景我太熟悉了——想用<picture>优化轮播图的加载速度，又得照顾IE10这个老伙计对吧？别担心，有几个靠谱的方案能让两边都兼顾：

1. 最基础的<img>兜底方案 #

IE10会直接忽略<picture>和<source>标签，但它能正常解析标签内部的<img>元素。所以只要在<picture>最后放一个<img>，就能保证IE10至少能加载一张可用的图片，现代浏览器则会优先按<source>的规则加载适配的资源。

示例代码：

<picture>
  <!-- 现代浏览器根据屏幕宽度加载对应图片 -->
  <source media="(min-width: 1024px)" srcset="carousel-large.jpg">
  <source media="(min-width: 768px)" srcset="carousel-medium.jpg">
  <!-- IE10 会直接加载这个兜底图 -->
  <img src="carousel-fallback.jpg" alt="轮播展示图" class="carousel-item">
</picture>

这个方案零额外成本，是最稳妥的基础保障，至少能让IE10用户看到内容，不会出现图片缺失的情况。

2. 用JS为IE10实现响应式加载 #

如果想让IE10也能根据屏幕尺寸加载不同的图片（而不是只用一张兜底图），可以通过JS检测浏览器对<picture>的支持度，然后手动设置<img>的src：

示例代码：

// 检测浏览器是否支持picture元素
if (!('HTMLPictureElement' in window)) {
  // 遍历所有轮播图的img元素
  const carouselImgs = document.querySelectorAll('.carousel-item');
  carouselImgs.forEach(img => {
    // 根据屏幕宽度设置对应图片
    if (window.innerWidth >= 1024) {
      img.src = "ie10-carousel-large.jpg";
    } else if (window.innerWidth >= 768) {
      img.src = "ie10-carousel-medium.jpg";
    } else {
      img.src = "ie10-carousel-small.jpg";
    }
    // 监听窗口 resize，保证窗口变化时也能切换图片
    window.addEventListener('resize', () => {
      // 可将上面的判断逻辑封装成函数重复调用
      updateCarouselImgSrc(img);
    });
  });

  // 封装判断逻辑的辅助函数
  function updateCarouselImgSrc(img) {
    if (window.innerWidth >= 1024) {
      img.src = "ie10-carousel-large.jpg";
    } else if (window.innerWidth >= 768) {
      img.src = "ie10-carousel-medium.jpg";
    } else {
      img.src = "ie10-carousel-small.jpg";
    }
  }
}

这个方案能让IE10也享受到一定的响应式优化，而且不需要引入额外的库，代码也比较轻量。

3. 可选：使用Picturefill Polyfill #

如果项目允许引入第三方库，picturefill是专门为解决<picture>兼容性问题而生的polyfill，它能让不支持<picture>的浏览器（包括IE10）模拟其行为。你只需要引入对应的脚本，然后正常编写<picture>代码即可，polyfill会自动处理适配逻辑。

不过要注意，IE10需要使用picturefill 3.x版本（更高版本不再支持IE10），如果项目对依赖体积比较敏感，前面的方案会更合适。

总结一下：优先用第一个基础兜底方案保证内容可用，如果需要IE10也有响应式加载，就加上JS检测的逻辑；polyfill是备选方案，看项目的具体需求来选择。

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