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

(2013/10/25 21:52), John Hax wrote:
> 注意1和2的差别是：方案1的img.src永远override
> @srcset和@src，所以不存在优先级问题；方案2的src和srcset属性是和@src和
> @srcset对应的，就产生了优先级、顺序之类的问题。

这个地方逻辑复杂，为了避免沟通有误，再说明一次。首先，DOM 属性的值跟读取
或写入本来就可以是非常不一样的逻辑，再怎么说，DOM 属性就是一个
setter/getter（以 WebIDL 来说）[1]，另外，HTML 规范中也非常多 “在获取
时……（on getting...）”、“在设置时……（on setting...）”的分隔，完全可以分
开讨论。所以，这里为了简化讨论，先讨论 setter。在我本来的 1)、2)、3) 的
分类中

>>> 2013/10/24 Kang-Hao (Kenny) Lu <kanghaol@oupeng.com>
>>>>   1) image.src 设值总是更新图片，.src 永远返回当时真正显示图片。
>>>>   2) image.src 设值总是更新图片，.src 返回 @src。
>>>>   3) image.src 设值只更动 @src，.src 返回 @src。

1) 跟 2) 的描述在前面（也就时应该是 getter 的部分）的部分是一样的，所
以，在我本来的分类中，1) 跟 2) 的 setter 就是我后来

(2013/10/25 23:39), Kang-Hao (Kenny) Lu wrote:
>   1) image.src 设值总是更新图片，完全不管 .srcset 的设值存在与否，也不
>      管 @src、@srcset 是什么。
>   2) image.src 设值在后面没有 .srcset 设值的情况总是更新图片，不管
>      @src、@srcset 是什么。
>   3) image.src 设值只更动 @src。

里的 2)。前面那个 “总是更新图片” 当然是写得很模糊，所以这个好一点。你感
觉是喜欢 1)，所以我上一封信主要讲的是 1) 的问题。其实还有一个

4) image.src 设值只在前面、后面都没有 .srcset 的时候会更新图片，否则
.srcset 盖过 .src。

每一个都有坑：


1) 的坑是

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

的状况下 JS 库 2 会不起作用。

2) 的坑是 .src 与 .srcset 设值不可交换，后者获胜（所以必须先设置 .src 再
设置 .srcset，否则不能设置 2x 的图像）。

3) 的坑是

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

的状况下 JS 库 1 不起作用。

4) 的坑是

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

的状况下 JS 库 2 会不起作用。基本上也就是 1) 的颠倒。

我们应该都同意 3) 的坑是最大的，1)、2)、4) 要怎么排是个问题，毕竟同时用
两个会设置 src/srcset 的库应该还是很稀有的。因为 @srcset 是压过 @src
的，所以我认为 .srcset 不压过 .src 奇怪了点，所以觉得 4 好过 1。总结就是

  2 > 4 > 1 > 3 （喜好排名，不是坑大小排名）

。


再换一个或许好一点的比喻。考虑

   img.src = "image.png";
   img.srcset = "image.png, image-HD.png 2x";

的 CSS 表达形式

1) 是

  image-1x: url(image.png) !important;
  image-2x: none !important;

  image-1x: url(image.png);
  image-2x: url(image-HD.png);

2) 是

  image-1x: url(image.png);
  image-2x: none;

  image-1x: url(image.png);
  image-2x: url(image-HD.png);

3) 是

  image-1x: url(image.png);

  image-1x: url(image.png) !important;
  image-2x: url(image-HD.png) !important;

4) 是

  image-1x: url(image.png);
  image-2x: none;

  image-1x: url(image.png) !important;
  image-2x: url(image-HD.png) !important;

。不知道这样子有没有比较好分析？这里面 2) 是因为没有 !important，所以不
可交换。3) 我觉得根本没必要考虑。就不知道有没有什么更妙的方法了……


[1] http://www.w3.org/html/ig/zh/wiki/WebIDL#es-attributes


以上

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

Received on Friday, 25 October 2013 19:40:21 UTC