JavaScript/jQuery event listener on image load IE issues

by

IE supports attachEvent instead.

image.attachEvent("onload", function() {
    // ...
});

With jQuery, you can just write

$(image).load(function() {
    // ...
});

When it comes to events, if you have the possibility of using jQuery I would suggest using it because it will take care of browser compatibility. Your code will work on all major browser and you don’t have to worry about that.

Note also that in order to the load event being fired in IE, you need to make sure the image won’t be loaded from the cache, otherwise IE won’t fire the load event.

To do this, you can append a dummy variable at the end of the url of your image, like this

image.setAttribute( 'src', image.getAttribute('src') + '?v=' + Math.random() );

Some known issues using the jQuery load method are

Caveats of the load event when used with images

A common challenge developers attempt to solve using the .load()
shortcut is to execute a function when an image (or collection of
images) have completely loaded. There are several known caveats with
this that should be noted. These are:

  • It doesn’t work consistently nor reliably cross-browser
  • It doesn’t fire correctly in WebKit if the image src is set to the
    same src as before
  • It doesn’t correctly bubble up the DOM tree
  • Can cease to fire for images that already live in the browser’s
    cache

See the jQuery docs for more info.

More Related Contents:

  1. event.preventDefault() vs. return false
  2. window.onload vs $(document).ready()
  3. Getting the ID of the element that fired an event
  4. jQuery.click() vs onClick
  5. Trigger a keypress/keydown/keyup event in JS/jQuery?
  6. Object.watch() for all browsers?
  7. window.onbeforeunload and window.onunload is not working in Firefox, Safari, Opera?
  8. Firing event on DOM attribute change
  9. Listening for variable changes in JavaScript
  10. How do you log all events fired by an element in jQuery?
  11. Jquery Event won’t fire after ajax call
  12. jQuery equivalent of JavaScript’s addEventListener method
  13. Way to know if user clicked Cancel on a Javascript onbeforeunload Dialog?
  14. How do you detect the clearing of a “search” HTML5 input?
  15. How to check if any JavaScript event listeners/handlers attached to an element/document? [duplicate]
  16. How to delay calling of javascript function?
  17. Mozilla firefox not working with window.onbeforeunload
  18. Implementing jQuery’s “live” binder with native Javascript
  19. How to tell which row number is clicked in a table?
  20. full-screen browser window on load document
  21. Javascript change event on input element fires on only losing focus
  22. Only fire an event once?
  23. Detecting an image 404 in Javascript
  24. Is it possible to catch browser’s File Open/Save dialog event using Javascript
  25. Fire oninput event with jQuery
  26. How do you force your Javascript event to run first, regardless of the order in which the events were added?
  27. How can I tell when a CSS background image has loaded? Is an event fired? [duplicate]
  28. Capturing result of window.onbeforeunload confirmation dialog
  29. How to execute code in a javascript append
  30. In web browsers, what’s the difference between onblur and onfocusout?

Leave a Comment