Browser-independent way to detect when image has been loaded

by

NOTE: I wrote this in 2010, the browsers in the wild were IE 8/9 beta, Firefox 3.x, and Chrome 4.x. Please use this for research purposes only, I doubt you could copy/paste this into a modern browser and have it work without issue.

WARNING: It is 2017 now I still get points on this now and then, please only use this for research purposes. I currently have no idea how to detect image loading status, but there are probably much more graceful ways of doing it than this… at least I seriously hope there are. I highly recommend NOT using my code in a production environment without more research.

WARNING Part Two Electric Boogaloo: It is 2019 now, most jQuery functionality is built into vanilla JS now. If you’re still using it, it may be time to stop and consider heading over to MDN and reading up on some of the new and fun stuff vanilla JS has to offer.

I’m a bit late to this party, maybe this answer will help someone else…

If you’re using jQuery don’t bother with the stock event handlers (onclick/onmouseover/etc), actually just stop using them altogether. Use the event methods they provided in their API.

This will alert, before the image is appended to the body, because load event is triggered when the image is loaded into memory. It is doing exactly what you tell it to: create an image with the src of test.jpg, when test.jpg loads do an alert, then append it to the body.

var img = $('<img src="https://stackoverflow.com/questions/821516/test.jpg" />');
img.load(function() {
    alert('Image Loaded');
});
$('body').append(img);

This will alert, after the image is inserted into the body, again, doing what you told it to: create an image, set an event (no src set, so it hasn’t loaded), append the image to the body (still no src), now set the src… now the image is loaded so the event is triggered.

var img = $('<img />');
img.load(function() {
    alert('Image Loaded');
});
$('body').append(img);
$img.attr('src',"https://stackoverflow.com/questions/821516/test.jpg");

You can of course also add an error handler and merge a bunch of events using bind().

var img = $('<img />');
img.bind({
    load: function() {
        alert('Image loaded.');
    },
    error: function() {
        alert('Error thrown, image didn\'t load, probably a 404.');
    }
});
$('body').append(img);
img.attr('src',"https://stackoverflow.com/questions/821516/test.jpg");

Per the request by @ChrisKempen …

Here is a non-event driven way of determining if the images are broken after the DOM is loaded. This code is a derivative of code from an article by StereoChrome which uses naturalWidth, naturalHeight, and complete attributes to determine if the image exists.

$('img').each(function() {
    if (this.naturalWidth === 0 || this.naturalHeight === 0 || this.complete === false) {
        alert('broken image');
    }
});

More Related Contents:

  1. How to find event listeners on a DOM node in JavaScript or in debugging?
  2. Is there a spec that the id of elements should be made global variable?
  3. Check if an element contains a class in JavaScript?
  4. How do you check if a JavaScript Object is a DOM Object?
  5. Chrome extension – retrieving global variable from webpage
  6. innerText vs innerHTML vs label vs text vs textContent vs outerText
  7. How can I loop through ALL DOM elements on a page?
  8. How to remove only the parent element and not its child elements in JavaScript?
  9. JavaScript DOM: Find Element Index In Container
  10. How to create Document objects with JavaScript
  11. Adding an onclick event to a table row
  12. How to copy a DOM node with event listeners?
  13. Unable to understand useCapture parameter in addEventListener
  14. “Access is denied” JavaScript error when trying to access the document object of a programmatically-created (IE-only)
  15. Is innerHTML asynchronous?
  16. Change ‘s option and trigger events with JavaScript
  17. How to unload a javascript from an html?
  18. Should I use document.createDocumentFragment or document.createElement
  19. How to get nodes lying inside a range with javascript?
  20. Why does JavaScript navigator.appName return Netscape for Safari, Firefox and Chrome?
  21. jQuery/Javascript – How to wait for manipulated DOM to update before proceeding with function
  22. Finding child element of parent with JavaScript
  23. Is it possible to get element’s numerical index in its parent node without looping?
  24. Is there any way of passing additional data via custom events?
  25. What damage is done by document.write()? [duplicate]
  26. Javascript DOM: Setting custom DOM element properties
  27. How can I remove wrapper (parent element) without removing the child?
  28. JavaScript: get the current executing node? [duplicate]
  29. Dynamically generated table – using an array to fill in TD values
  30. Why is iframe.contentWindow == null?

Leave a Comment