javascript - Is it necessary to set onload function before setting src for an image object?

Question

I was told it is necessary to set the onload function before setting src for an image object. I've searched in SO for this.

I found this code:

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

But most people believe that onload should be written before src like this:

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

MUST it be written in this order? Are there any cases when the above code will cause an error (like if an image is too big)?

If you anyone can show me some examples, I will be very appreciate.

Answer 1

It doesn't have to, but if setting the src and the image loads before your handler is attached, it won't fire.

JavaScript operates asynchronously. Setting the src will cause the web browser to load the image outside the main execution flow. If onload isn't set at the time that operation completes - which could be between setting src and onload.