将图像 src 设置为数据 URL 是否应该立即可用？

Question

考虑以下（脆弱的）JavaScript 代码：

var img = new Image;
img.src = "data:image/png;base64,..."; // Assume valid data

// Danger(?) Attempting to use image immediately after setting src
console.log( img.width, img.height );
someCanvasContext.drawImage( img, 0, 0 );

// Danger(?) Setting onload after setting src
img.onload = function(){ console.log('I ran!'); };

问题

• 图像宽度和高度是否应该立即正确？
• 画布绘制应该立即生效吗？
• 是否应该调用 onload 回调（在 src 更改后设置）？

实验测试
我使用类似的代码创建了一个简单测试页面。在 Safari 中，我的第一次测试，通过本地打开 HTML 页面 (file:/// url) 并从我的服务器加载它，显示一切正常：高度和宽度正确，画布绘制工作正常，和 onload 也会触发。

在Firefox v3.6 (OS X)中，启动浏览器后加载页面显示设置后高度/宽度不正确，drawImage()失败。 （但是，onload 处理程序确实会触发。）但是，再次加载页面时，设置后会立即显示宽度/高度是正确的，并且 drawImage() 正在工作。 Firefox 似乎将数据 URL 的内容缓存为图像，并在同一会话中使用时立即可用。

在 Chrome v8 (OS X) 中，我看到与 Firefox 中相同的结果：图像无法立即可用，但需要一些时间才能从数据 URL 异步“加载”。

除了上述浏览器能或不能工作的实验证明之外，我真的很喜欢有关其行为规范的链接。到目前为止，我的 Google-fu 还无法胜任这项任务。

谨慎行事
对于那些不明白为什么上述内容可能很危险的人，请知道您应该使用这样的图像以确保安全：

// First create/find the image
var img = new Image;

// Then, set the onload handler
img.onload = function(){
  // Use the for-sure-loaded img here
};

// THEN, set the src
img.src = '...';

Answer 1

由于还没有人找到关于其行为方式的任何规范，因此我们必须对其行为方式感到满意。以下是我的测试结果。

            | is image data usable right  | does onload callback set after src
            |     after setting src?      |   is changed still get invoked?
------------+-----------------------------+-------------------------------------
Safari  5   |             yes             |                  yes                
------------+-----------------------------+-------------------------------------
Chrome  8   | **no** (1st page load), but |                  yes                
FireFox 3.6 |  yes thereafter (cached)    |                                     
------------+-----------------------------+-------------------------------------
IE8         |    yes (32kB data limit)    |                  yes         
------------+-----------------------------+-------------------------------------
IE9b        |             yes             |                 **no**              
------------+-----------------------------+-------------------------------------

总之：

• 您不能假设设置 data-uri 后图像数据立即可用；您必须等待 onload 事件。
• 由于 IE9，您无法在设置 src 后设置 onload 处理程序并期望它被调用。
• “谨慎行事”（来自上述问题）中的建议是确保正确行为的唯一方法。

如果有人能找到讨论此问题的规范，我会很乐意接受他们的答案。

Answer 2

将控制权交还给浏览器渲染引擎后，测试在 FF 4b9 和 Chromium 8.0.552.237 中报告 true。我修改了这些部分：

img.onload = function(){   // put this above img.src = …
    document.getElementById('onload').innerHTML = 'yes';
};
img.src = img_src;
…
window.setTimeout(function () {   // put this inside setTimeout
    document.getElementById('wh').innerHTML = (img.height==img.width) && (img.height==128);
}, 0);

更新：是的，我理解这个“答案”更像是一条评论，但只是想指出这一点。经过测试，我得到了可重现的结果：

• 如果没有 setTimeout，在两种浏览器中，我第一次打开页面时都会得到 false ，只有在点击后才得到 true F5。显式清除缓存后，重新加载后都会再次显示 false 。
• 使用 setTimeout 时，宽度/高度测试始终评估为 true。

在这两种情况下，图像第一次不会显示，只有在重新加载页面后才会显示。