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 c

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.

Answer 2

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.

Answer 3

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

Answer 4

Answers above always mentioned the same problem like:

there is the possibility the download could complete before you attach the onload event handler

or

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

or bug with IE7.

First, let's ignore IE7.

Second, I don't think problem mentioned exist, for example:

function loadImg(url) {
  let img = new Image()
  img.src = url
  let date1 = Date.now()
  console.log(img.complete)
  while (Date.now() - date1 < 5000) {

  }
  img.onload = function() {
    console.log('success')
  }
  console.log('sync first')
}
loadImg('https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg')

Normally, you will get:

false
sync first
success

Well, if you executed on another site which will use cache more than one time. You will get the result like image below:

The answer is clear now.

Well, as long as you set the onload synchronously. You will not miss the onload event.

Why would I say synchronously. For another example,

function loadImg(url) {
  let img = new Image()
  img.src = url
  let date1 = Date.now()
  console.log(img.complete)
  while (Date.now() - date1 < 5000) {
  
   }
  setTimeout(function() {
    img.onload = function() {
      console.log('success')
    }
  })

  console.log('sync first')
}
loadImg('https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg')

The result on another site:

The second time with cache, load event won't be triggered. And the reason is setTimeout is asynchronously.

Answer 5

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.