Javascript 在为图像对象设置src之前，是否需要设置onload函数？

我被告知在为图像对象设置

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';

必须按此顺序写吗？是否存在上述代码会导致错误的情况（如图像太大）

---

如果有人能给我看一些例子，我将不胜感激。

不必这样做，但是如果在附加处理程序之前设置

src

并加载图像，它将不会启动

---

JavaScript异步运行。设置

src

将导致web浏览器在主执行流之外加载图像。如果在操作完成时未设置

onload

，这可能介于设置

src

和

onload

之间，浏览器将在分配src后立即开始异步下载图像，因此，有可能在附加onload事件处理程序之前完成下载，并且永远不会触发将映像添加到DOM的代码。

一旦为src赋值，映像将加载。如果在达到加载之前加载，您的加载将不会触发

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

根据我的经验（21年以上的JS经验），你必须首先设置onload，尤其是在IE中，当我开始使用JS时，IE甚至不支持image对象

如果您发现缓存映像未触发的问题，请在下次设置src时添加

+“？”+new Date（）.getTime（）

，以避免缓存

这里是来自MDN的示例，它也使用了我建议的顺序

---

另一个SO链接

如果缓存了图像，大多数浏览器会立即触发加载事件。

---

然而，InternetExplorer7根本不会启动它。这就是为什么最好先设置src。

上面的答案总是提到同样的问题，如：

有可能在附加onload事件处理程序之前完成下载

或

但是如果在附加处理程序之前设置src和图像加载，则不会触发

或者IE7的bug

首先，让我们忽略IE7

其次，我认为不存在上述问题，例如：

函数加载img（url）{
设img=newimage（）
img.src=url
让date1=Date.now（）
控制台日志（img.complete）
while（Date.now（）-date1<5000）{
}
img.onload=函数（）{
console.log（'success'）
}
console.log（'sync first'）
}
loadImg（'https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg）

我猜IE在这个问题上出了问题。加载事件会在脚本执行期间发生吗？注意，代码示例不会在设置处理程序和源代码之间返回。我不太清楚，您能更详细地解释一下吗？是JavaScript异步运行吗？或者它有时会意外运行同步？正如@ JordValk所建议的，如果你在谈论异步，那么预期的是，OnLoad将在下一帧上运行，而不是在执行脚本的中间。我真的不知道，所以我在问，但是如果图像已经加载，一些浏览器可能会触发onload同步，因此需要首先定义它。（显然不是如何定义

Image.src=

，而是说明了我的意思），即使

onload

是在立即超时的情况下启动的，但在定义之后它仍然会启动。您对这个问题有何看法？以我的经验，一点也不这一个支持我，它说的正是我说的。。。“这是因为IE将缓存映像，并且在映像已经加载后，onload事件将永远不会触发。”这并不意味着最好先设置src。如果需要再次运行，只需将src设置为+“？”+new Date（）.getTime（）或类似的值，您对这个问题有何看法？我有多年的JS经验（比图像对象存在的时间要长），必须在设置src之前加载。在我使用过的所有浏览器中，它都能正常工作。在我使用过的许多浏览器中，它都不是以另一种方式工作的，直到今天在Chrome中我才看到它在你的Fiddle中工作。我相信这种方式可以避免很多问题，尽管在某些情况下，另一种方式也可以工作。所以我接受你的帖子。我认为答案是，尽管不同浏览器的实现不同，但如果你想让它表现一致，你必须先设置

onload

。