Re: src 与 srcset（或是 src-N）的 JS 交互

(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"？

如果是这样，那这跟我原先想的 1 不太一样，再来列一次，这次只管写的部分
了，加入读的部分产生的排列组合太多：

  1) image.src 设值总是更新图片，完全不管 .srcset 的设值存在与否，也不
     管 @src、@srcset 是什么。
  2) image.src 设值在后面没有 .srcset 设值的情况总是更新图片，不管
     @src、@srcset 是什么。
  3) image.src 设值只更动 @src。

> 对于不用srcset的页面来说，1的方案不会有任何影响。
> 对于用srcset的html，但使用老的不支持srcset的库。库只修改src，固然一旦
> 修改src就失去了srcset作用，但至少功能能保持预想的方式。
> 最后，使用支持srcset的库。脚本要改变图片，只操作srcset，不操作src。

这里有个问题，照 1) 跟你说 “只操作srcset” 的逻辑，如果你用的库的情形是

   HTML                       <img src=xxx srcset=xxx />
+  不支持 srcset 的 JS 库 1   设置了 .src
+  支持 srcset 的 JS 库 2     设置了 .srcset

那这个时候 JS 库 2 会不起作用。支持 .srcset 的 JS 库的完整正确写法是

  img.src = null;†
  img.srcset = 新值;

，要不就是赌不会连续用到两个改 .src/.srcset 的库（实际上这种情况的确很少）。

> @src是给不支持srcset的fallback。

这是一种想法。不过 Wikipedia 的做法是把 1x 的 .png 放到 @src 里，@srcset
没有 1x 的 .png：

  <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 的图像。

> 这里的要点是，html因为是静态的，需要同时写srcset和src，但是脚本不需要
> 同时写入。

是。但是比起 1) 提案要求的

  if ('srcset' in img)
    img.srcset = newSrcSet;
  else
    img.src = newSrcFallback;

写法，2) 提案要求的

  img.src = newSrcFallback;
  img.srcset = newSrcSet;

少了两行，虽然顺序要求的确有点坑。

> 注意1和2的差别是：方案1的img.src永远override
> @srcset和@src，所以不存在优先级问题；方案2的src和srcset属性是和@src和
> @srcset对应的，就产生了优先级、顺序之类的问题。

别忘了方案 1) 也覆盖 .srcset 了。

> “我”是指开发者。我说的意思是，开发者不知道当前处于哪种状态。因为看
> src和srcset是不知道那是被覆盖的值还是默认的@attr的值，因此无法确定此刻
> 到底是什么优先级或顺序。也就是这个行为是只写的。这跟input的脏值标记不
> 一样，因为input不存在优先级问题，开发者是不需要知道是否处于脏值的。开
> 发者最多需要知道值是否改变，拿input.value比较input.defaultValue就可以
> 了。而img不行，开发者非常可能需要知道当前到底是src起作用，还是srcset起
> 作用。

为什么开发者需要知道当前到底是src起作用，还是srcset起作用？还有为什么 1)
的提案可以帮助开发者知道到底是src起作用还是srcset起作用？我看不是很懂这
一段，这一段好像跟 .src 的读取行为比较有关？


†这部分有争议，不过为了避免把这个讨论弄得更乱，分下一篇吧。


以上

Kenny
-- 
Web Specialist, Opera Sphinx Team, Oupeng Browser, Beijing
Try Sphinx: http://sphinx.oupeng.com/

Received on Friday, 25 October 2013 15:40:10 UTC