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

html, image, javascript

Solution

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

Problem

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.

Original source

Related problems