16

For detecting when an image has completed downloading which method should I use?

image.onload = function () {}

or 

image.addEventListener("load", function () {} );

5 Answers5

19

onload:

  1. Supports only a single listener.
  2. Works in all browsers.
  3. You unbind the event handler by clearing the onload property.

addEventListener:

  1. Supports multiple listeners.
  2. Doesn't work in older IE browsers (they use attachEvent).
  3. You unbind the listener with removeEventListener() which requires info identifying the original eventListener.

If addEventListener is supported and you only need one listener, then you can use either.

If it's a simple self-contained piece of code that nobody else will be messing with then, there's no issue with using onload. If it's a more complex piece of software that other developers may mess with and any kind of extensibility is desired and you have cross browser support for event listeners, then addEventListener() is more flexible and is probably more desirable.

jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • Could be worth noting that unbinding is simpler with the `onload` property. – the system Feb 14 '13 at 22:40
  • @thesystem - `removeEventListener` works too and I've never encountered a reason to unbind a load event handler for an image. In any case, I will add that difference. – jfriend00 Feb 14 '13 at 22:41
  • @pure_code - I don't think there's anything wrong with using `onload` in some situations, particular when you want to support older IE browsers and don't already have cross browser event library present (like in a simple stand-alone widget). Certainly `addEventListener()` is more flexible (supports multiple listeners). – jfriend00 Feb 14 '13 at 22:48
2

image.addEventListener("load", function() {} ); will not work on all browsers, but assuming you have a backup and use image.attachEvent("onload", function() {})

if(image.addEventListener) { image.addEventListener("load",function() {}); }
else { image.attachEvent("onload", function() {}); }

This will have the benefit that you are not overriding any onload event that already exists on the image, and that your onload event will not be overridden by any other code.

Directly modifying the "onload" attribute of a DOM Element is usually not recommended just because you may think "Hey, I can save a couple lines of code by setting it, and I only need one listener, so I'll just set it rather than using addEventListener/attachEvent" - but it invariably leads to "Well what if I need to add something else later?"

For this reason javascript developers usually use a library to attach events, so you can add the listener confidently with one line of code and it will work in all browsers.

codefactor
  • 1,616
  • 2
  • 18
  • 41
2

try 

if(image.complete){
  //....
}
T.Todua
  • 53,146
  • 19
  • 236
  • 237
1

Both, Image.complete as well as image.onload don't seem to work in Webkit, at least the version on my mobile. They return false infinitely. It works in opera though, so the code may be ok.

Therefore I am currently using a trick that works at least in opera and webkit. I have a 1x1 pixel placeholder image ready. Now I set the src to the to be loaded image and (usually a bad practice, but this is a game that cannot start without that image) I go into a loop that updates some "loading" splashscreen gfx, but basicly just checks the width of the image, whether the image.width is bigger than 1 pixel.

Like I said, tested only with opera and webkit. I use it to load an atlas image and copy the containing tiles to individual images over a canvas. Once finished, the src of the atlas image is set back to the 1x1 placeholder, so it can be used that way again. For complete savity, one should also wait until the placeholder is 1 pixel in width again, before reuseing it that way.

Simon Hänisch
  • 4,740
  • 2
  • 30
  • 42
dd_1138
  • 21
  • 4
0
const handleImage=()=>{}
image.addEventListener("load",handleImage);  //adding a eventListener
image.removeEventListener("load",handleImage);  //removeing a eventListener
Maifee Ul Asad
  • 3,992
  • 6
  • 38
  • 86
Sunil Panwar
  • 31
  • 2
  • 4
    Your answer could be improved by adding more information on what the code does and how it helps the OP. – Tyler2P Jan 31 '22 at 18:12
  • See "[Explaining entirely code-based answers](https://meta.stackoverflow.com/q/392712/128421)". While this might be technically correct it doesn't explain why it solves the problem or should be the selected answer. We should educate along with helping solve the problem. – the Tin Man Feb 08 '22 at 05:42