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

Question

我被告知有必要onload在设置src图像对象之前设置功能.我在SO搜索过这个.

我找到了这段代码:

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

必须按此顺序编写吗？上述代码是否会导致错误(如图像太大)？

如果你有人能给我看一些例子,我将非常感激.

Answer 1

它不必,但如果src在附加处理程序之前设置和加载图像,它将不会触发.

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

Answer 2

只要您为 src 分配一个值，图像就会加载。如果它在达到 onload 之前加载，您的 onload 将不会触发。

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

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

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

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