弄个表格更清楚：
@src=a
@srcset=b 2x c 1x
.src = d
.srcset = e 2x f 1x
对应：
1x 2x
@src a(1) none(1)
@srcset c(5) b(5)
.src d(?) none(?)
.srcset f(?) e(?)
括号里是优先级。
2013/10/27 John Hax <john...@gmail.com>
>
>
>
> 2013/10/25 Kang-Hao (Kenny) Lu <kangh...@oupeng.com>
>
>> (2013/10/25 21:52), John Hax wrote:
>>
>> > 1的方法是把img.src明确为最终显示的图片，也就是排除了同时设置srcset/src
>> > 的case。也就是说如果手动设置了src，就覆盖了srcset的设置。
>>
>> 如果我没弄错你的意思。你的意思是在这个方法中
>>
>> img.src = "picture-1.png";
>> img.srcset = "picture-2.png 2x";
>>
>> 在 window.devicePixelRatio = 2 的浏览器里，因为 .src 覆盖了 .srcset 的设
>> 置，所以显示的图片是 "picture-1.png"？
>>
>
>
> 正是如此。但如果遵循我所赞同的方案，在实际开发中是这样写的：
>
> if ('srcset' in img) img.srcset = 'pic2.png 2x, pic1.png 1x'
> else img.src = 'pic1.png'
>
> 所以不会出现在支持srcset的ratio为2的浏览器里显示pic1的问题。
>
>
>
>> > 最后，使用支持srcset的库。脚本要改变图片，只操作srcset，不操作src。
>>
>> 这里有个问题，照 1) 跟你说 “只操作srcset” 的逻辑，如果你用的库的情形是
>>
>> HTML <img src=xxx srcset=xxx />
>> + 不支持 srcset 的 JS 库 1 设置了 .src
>> + 支持 srcset 的 JS 库 2 设置了 .srcset
>>
>> 那这个时候 JS 库 2 会不起作用。支持 .srcset 的 JS 库的完整正确写法是
>>
>
>
> 正是如此。这里的想法是，虽然srcset不起作用了，但是至少功能是可用的，无非是退化到只有src的情况。但反过来的情况就未必能接受了，因为它导致原本可以用的功能失效了（改变.src，图片却不变）。
>
>
>>
>> img.src = null;†
>> img.srcset = 新值;
>>
>
>> ，要不就是赌不会连续用到两个改 .src/.srcset 的库（实际上这种情况的确很少）。
>>
>
> 不是赌，而是实际开发中应该不会出现这样的情况——对同一张图片同时用改.src的老的库和改.srcset的新的库。
>
> 我认为实际上容易出现的情形是：
> 1. 内容进化到了用@srcset，但库还是老的
> 2. 从老的库（用img.src）转换到新的库（用img.srcset）
>
>
>>
>> > @src是给不支持srcset的fallback。
>>
>> 这是一种想法。不过 Wikipedia 的做法是把 1x 的 .png 放到 @src 里，@srcset
>> 没有 1x 的 .png：
>>
>
> 的确现在是可以这样的。老实说我认为这是个不好的做法。我其实认为规范应该改为有@srcset时只用@srcset而忽略@src。这样其实理解起来更简单。
>
>>
>> <img src="picture.png" srcset="picture-HD.png 2x" />
>>
>> 不是 “不支持 @srcset 的 fallback”。fallback 的思维的写法应该是：
>>
>> <img src="picture.png" srcset="picture.png，picture-HD.png 2x" />
>
>
>> > 表面上看，这也有同样问题，脚本如果要改变fallback的值，需要
>> > setAttribute('src', value)。但是实际上是不需要设fallback的，而是写成这
>> > 样 if ('srcset' in img) img.srcset = newSrcSet; else img.src =
>> > newSrcFallback 就可以了。注意这代码即使对现在的srcset实现也是对的。
>>
>> 如果 newSrcSet 是 "picture-HD.png 2x" 而不是 "picture.png，picture-
>> HD.png 2x"，那就是错的，因为没有设置到 1px 的图像。
>>
>
> 确实。但是在实际当中，这不成为问题。反过来说，我想像不到有只改变2x 3x .5x的图片而不改变1x图片的需求啊。
>
>
>> > 这里的要点是，html因为是静态的，需要同时写srcset和src，但是脚本不需要
>> > 同时写入。
>>
>> 是。但是比起 1) 提案要求的
>>
>> if ('srcset' in img)
>> img.srcset = newSrcSet;
>> else
>> img.src = newSrcFallback;
>>
>> 写法，2) 提案要求的
>>
>> img.src = newSrcFallback;
>> img.srcset = newSrcSet;
>>
>> 少了两行，虽然顺序要求的确有点坑。
>>
>
>
> 代码多少不是问题。能否理解才是问题。@src和@srcset是并存关系，img.src和img.srcset却是互相覆盖的关系，怎么看都是一件奇怪的事情。
>
>
>>
>> > 注意1和2的差别是：方案1的img.src永远override
>> > @srcset和@src，所以不存在优先级问题；方案2的src和srcset属性是和@src和
>> > @srcset对应的，就产生了优先级、顺序之类的问题。
>>
>> 别忘了方案 1) 也覆盖 .srcset 了。
>>
>
> 但是顺序是单一的：
>
> src > srcset > @srcset > @src
>
> 而方案2的顺序如何理解呢？困难得多啊。
>
>
>
