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

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.

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.

As soon as you assign the src a value, the image will load. If it loads before the onload is reached, your onload will not fire.

To support ALL implementations, I strongly suggest to assign the onload handler before setting the src.

It is my experience (21+ years of JS) that you MUST set onload first - especially in IE which did not even support the image object when I started with JS.

If you get issues about the cached image not firing, add +"?"+new Date().getTime() when you set the src next time to avoid cache.

Here is the example from MDN which also uses the order I have suggested

Creating an image from scratch

Another SO link image.onload not firing twice in IE7

The browser will start downloading the image asychronously as soon as you assign a src, so there is the possibility the download could complete before you attach the onload event handler and never fire the code to add the image to the DOM.

Most browser fire the load event imediatly if the image if the image is cached. However, Internet explorer 7 won't fire it at all. That's why it's better to set the src first.