Safari浏览器下Vue组件中img标签srcset重复加载不同尺寸图片的问题求助

我之前也碰到过Safari里响应式图片加载的类似坑，你的情况本质是Safari对srcset和动态修改sizes属性的处理逻辑和Chrome、Firefox不一致，才导致了重复加载的问题：

问题根源 #

你一开始给图片设置了sizes="1px"，Safari会先基于这个极小值匹配到529w的小图；但同时，因为图片样式是width:100%，Safari又会提前预判它的最终显示宽度，发起1080w大图的请求——这就造成了两张图都被加载的情况。更关键的是，你的onload回调是在图片加载完成后才修改sizes，这时候已经晚了，两次请求都已经发出去了。

可行的解决方案 #

1. 提前计算初始sizes，别等onload触发 #

不要依赖图片加载完成后再修改sizes，而是在组件初始化时就根据画廊布局算出正确的sizes值，让Safari一开始就选对图片：

修改你的Vue组件代码，用mounted钩子提前计算：

<template>
  <img class="responsive-image" :srcset="image.srcset" :src="image.src" loading="lazy" :sizes="imageSizes">
</template>

<script>
export default {
  data() {
    return {
      imageSizes: '100vw' // 先给移动端默认值兜底
    }
  },
  mounted() {
    this.setCorrectImageSizes()
    // 监听窗口 resize，适配布局变化
    window.addEventListener('resize', this.setCorrectImageSizes)
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.setCorrectImageSizes)
  },
  methods: {
    setCorrectImageSizes() {
      // 拿到画廊网格项的宽度（也就是图片的容器宽度）
      const containerWidth = this.$el.parentElement.getBoundingClientRect().width
      if (!containerWidth) return
      // 转换成相对于视口的vw值
      const vwValue = Math.ceil(containerWidth / window.innerWidth * 100)
      this.imageSizes = `${vwValue}vw`
    }
  }
}
</script>

<style scoped>
.responsive-image {
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
}
</style>

2. 直接用静态sizes（更简单的优先方案） #

既然你的画廊布局是固定的：桌面3列、平板2列、移动端1列，完全可以不用JavaScript动态计算，直接写静态的sizes规则，浏览器会自动根据视口匹配：

<img 
  class="responsive-image" 
  :srcset="image.srcset" 
  :src="image.src" 
  loading="lazy" 
  sizes="(min-width: 1024px) 33vw, (min-width: 768px) 50vw, 100vw"
>

这个方案兼容性更好，也省去了监听resize的麻烦，推荐优先尝试。

3. 极端情况：抑制预加载行为 #

如果上面的方法都没效果，可以试试给图片加fetchpriority="low"属性，让Safari不要提前预加载它“预判”的合适尺寸，不过这个属性可能影响加载性能，谨慎使用：

<img 
  class="responsive-image" 
  :srcset="image.srcset" 
  :src="image.src" 
  loading="lazy" 
  sizes="(min-width: 1024px) 33vw, (min-width: 768px) 50vw, 100vw"
  fetchpriority="low"
>

验证方式 #

改完之后在Safari的DevTools里查看Network面板，确认只加载了当前布局对应的图片尺寸；再拖拽窗口大小，检查图片是否会切换到对应的尺寸（如果用了resize监听的话）。

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