设置图像对象的src之前是否需要设置onload函数？

我被告知有必要在为图像对象设置src之前设置onload函数。我已经为此searched in SO。设置图像对象的src之前是否需要设置onload函数？

我发现这个代码：

var img = new Image(); 
img.src = 'image.jpg'; 
img.onload = function() { 
    document.body.appendChild(img); 
};

但大多数人认为，应该onload像src这之前写：

var img = new Image(); 
img.onload = function() { 
    document.body.appendChild(img); 
}; 
img.src = 'image.jpg';

MUST它顺序写？上述代码是否会导致错误（如图像太大）？

如果你有人可以给我看一些例子，我将非常感激。

来源

2013-02-01 pktangyue

我想IE漏洞在这一个。 –

只要给src赋值，图像就会加载。如果在达到onload之前加载，则onload不会触发。

为了支持所有实现，我强烈建议在设置src之前分配onload处理程序。

这是我的经验（21年以上的JS），你必须首先设置onload - 特别是在我开始使用JS时甚至不支持图像对象的IE。

如果您发现缓存图像未触发问题，请在下次设置src以避免缓存时添加+"?"+new Date().getTime()。

下面是来自MDN的例子也使用我建议

Creating an image from scratch

另一个SO链接image.onload not firing twice in IE7

来源

2013-02-01 14:39:09 mplungjan

是的，这是我。谢谢你的链接。 – pktangyue

您如何看待这个问题？ http://stackoverflow.com/questions/7552629/can-onload-event-fire-right-after-setting-image-src-attribute – pktangyue

我的多年JS经验（比图像对象存在更多年）onload必须在src被设置之前。在所有浏览器中，我都使用它。在许多浏览器中，我使用它并没有反其道而行，直到今天在Chrome中，我看到它在你的小提琴中工作 – mplungjan

它并不是必须的，但如果在连接处理程序之前设置了src和图像加载，它将不会触发。

JavaScript以异步方式运行。设置src将使Web浏览器在主执行流程之外加载映像。如果onload在操作完成时未设置 - 可能在设置src和onload之间。

来源

2013-02-01 14:36:27

脚本执行过程中可能发生加载事件吗？请注意，代码示例在设置处理程序和源代码之间不会返回。 –

我不明白，你能解释一下更详细吗？ – pktangyue

JavaScript是否运行异步？或者它有时会意外运行同步？正如@JanDvorak所建议的那样，如果你在谈论异步，期望的是onload将运行在下一帧，而不是执行脚本的中间。我真的不知道，所以我问，但它*似乎*像onload可能会触发一些浏览器同步，如果图像已加载，因此需要先定义它。 – numbers1311407

只要您分配src，浏览器就会开始下载图像，因此在附加onload事件处理程序之前可能会完成下载，并且从不触发代码将图像添加到DOM。

来源

2013-02-01 14:37:48 Hippocrates

大多数浏览器火Load事件imediatly如果如果图像缓存图像的顺序。但是，Internet Explorer 7根本不会启动它。这就是为什么最好先设置src。

来源

2013-02-01 14:39:25

根本没有我的经验！ - 这一个支持我http://stackoverflow.com/questions/1038327/image-onload-not-firing-twice-in-ie7 – mplungjan

它说我到底在说什么... “t的引起，因为IE会缓存图像，并且onload事件永远不会在它已经被加载之后触发。“ –

这并不意味着最好先设置src。如果你需要它再次运行，你只需将src设置为+“？”+ new Date（）。getTime（）或类似的 – mplungjan

设置图像对象的src之前是否需要设置onload函数？

回答

相关问题