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.

I guess IE bugs out on this one.

John Dvorak
– John Dvorak

2013-02-01 14:36:44 +00:00
Commented Feb 1, 2013 at 14:36 — John Dvorak
– John Dvorak, Commented Feb 1, 2013 at 14:36

Daniel A. White · Accepted Answer · 2013-02-01 14:44:15Z

9

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.

edited Feb 1, 2013 at 14:44

answered Feb 1, 2013 at 14:36

Daniel A. White

192k49 gold badges389 silver badges473 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

John Dvorak Over a year ago

Could the load event happen during script execution? Note the code sample does not return between setting the handler and the source.

pktangyue Over a year ago

I can't understand clear, could you explain it more detailed？

numbers1311407 Over a year ago

Is it that JavaScript runs async? Or that it sometimes runs unexpectedly sync? As @JanDvorak suggests, if you're talking async, the expectation would be that the onload would run on the next frame, not in the middle of the executing script. I honestly do not know, so I'm asking, but it seems like the onload might be fired sync by some browsers if the image is already loaded, hence the need to define it first.

numbers1311407 Over a year ago

E.g. this fiddle (obviously not how Image.src= is defined, but illustrates what I mean), even though the onload is fired with an immediate timeout, it still fires when defined after.

pktangyue Over a year ago

what do you think about this question? stackoverflow.com/questions/7552629/…

mplungjan · Accepted Answer · 2017-09-10 20:45:05Z

5

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

edited Sep 10, 2017 at 20:45

answered Feb 1, 2013 at 14:39

mplungjan

180k29 gold badges183 silver badges246 bronze badges

4 Comments

pktangyue Over a year ago

what do you think about this question? stackoverflow.com/questions/7552629/…

mplungjan Over a year ago

I my many years experience with JS (more years than the image object existed) the onload MUST be before the src is set. In all browsers I have used it works. In MANY browsers I have used it does not work the other way around and it is not until today in Chrome I saw it working in your fiddle

pktangyue Over a year ago

I believe this way can avoid many issues, though the other way works in some case. So I would accept you post.

numbers1311407 Over a year ago

I think the answer is that although implementations differ between browsers, you must set the onload first if you want it to behave consistently.

Hippocrates · Accepted Answer · 2013-02-01 14:37:48Z

2

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.

answered Feb 1, 2013 at 14:37

Hippocrates

2,5402 gold badges22 silver badges37 bronze badges

Comments

Jean-Georges · Accepted Answer · 2013-02-01 14:39:25Z

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.

answered Feb 1, 2013 at 14:39

Jean-Georges

6885 silver badges12 bronze badges

3 Comments

mplungjan Over a year ago

Not in my experience at all! - this one backs me up stackoverflow.com/questions/1038327/…

Jean-Georges Over a year ago

It says exactly what i'm saying ... "t's caused because IE will cache the image, and the onload event will never fire after it's already been loaded."

mplungjan Over a year ago

It does not follow that it is better to set src first. If you need it to run again, you just set the src to something + "?"+new Date().getTime() or similar

xianshenglu · Accepted Answer · 2018-06-10 12:10:06Z

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.

So that code could also fail? img.src = url; await new Promise(function (res) { img.onload = res; });

Collectives™ on Stack Overflow

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

5 Answers 5

5 Comments

4 Comments

Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

4 Comments

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related