Question

I understand that doing what I’m attempting is very bad programming form (relying on javascript’s detection of active images for crucial purposes). However, I have some code that greatly depends on this detection.

Here’s an example of what I’m attempting: http://jsfiddle.net/5BPJj/1/

This works well in all browsers except IE9. As I understand it, IE9’s $(window).load is unique in that the event sometimes fires before all images finish loading. Thus, I’m experiencing a race condition–sometimes when images are enabled, they are not yet loaded and so treated as disabled.

I grabbed the image detection code from here: http://talideon.com/weblog/2005/02/detecting-broken-images-js.cfm

If anybody can get this working in IE9 (and IE7+ et al), or knows of a more reliable image detection method, I’d be most most appreciated.

Please note that I need to know not just when images are enabled (a simple load event), but specifically when they are disabled.

Thank you so much.

=======

EDIT: To disable images in IE, I’m using Tools > Internet Options > Advanced and unchecking “Show pictures”

Answer 1

If you’re able to use jQuery you could fire the broken image detection function when the DOM has loaded, the ready() method “does not get triggered until all assets such as images have been completely received” (from the documentation page).

Something like this would do the trick I think:

jQuery(document).ready(function() {
  for (var i = 0; i < document.images.length; i++) {
    if (!IsImageOk(document.images[i])) {
      document.images[i].style.visibility = "hidden";
    }
  }
});

Hope that helps