Geek Answers Handbook

What is the best way to detect image upload completion - onload or addEventListener ()?

To determine when the image finished loading, which method should I use?

image.onload = function () {}

or

 image.addEventListener("load", function () {} );
+6
source share
4 answers

onload:

  • Only one listener is supported.
  • It works in all browsers.
  • You unbind the event handler by clearing the onload property.

addEventListener:

  • Support for multiple listeners.
  • Does not work in older IE browsers (they use attachEvent ).
  • You untie the listener with removeEventListener() , which requires information that identifies the original eventListener.

If addEventListener supported and you only need one listener, you can use it.

If this is a simple, self-contained piece of code that no one will bother with yet, there is no problem using onload . If this is a more complex piece of software that other developers can interact with and require some extensibility, and you have cross-browser support for event listeners, then addEventListener() is more flexible and probably more desirable.

+8
source

try

 if(image.complete){ //.... }
+2
source

image.addEventListener("load", function() {} ); will not work in all browsers, but provided that 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 advantage that you do not override any onload event that already exists in the image, and that your onload event will not be overridden by any other code.

Directly changing the "onload" attribute of a DOM element is usually not recommended just because you might think "Hey, I can save a couple lines of code by setting it, and I only need one listener, so I just set it, and not use addEventListener / attachEvent "but it invariably leads to" Well, if I need to add something even later? "

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

+1
source

Both Image.complete and image.onload do not seem to work in Webkit, at least on my mobile device. They return false indefinitely. However, it works in the operating room, so the code may be in order.

Therefore, I now use a trick that works even in opera and webkit. I have an image with a 1x1 pixel sample. Now I installed src in the downloadable image and (usually this is bad practice, but it is a game that cannot run without this image). I go into a loop that updates the splashscreen gfx “boot”, but basically just checks the image width, be it image.width greater than 1 pixel.

As I said, verified only with opera and webkit. I use it to upload an atlas image and copy the contained fragments into separate images on top of the canvas. Upon completion, the src atlas image returns to the 1x1 placeholder, so it can be used again in this way. To be sure, you should also wait until the placeholder is 1 pixel wide before reusing it this way.

+1
source

More articles:


All Articles