考虑以下（脆弱的）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 = '...';