image load event on IE

Question

I am developing a site, and I have to set the src of the not found images, to an error image.

the methods .load() and .error() works always except in IE. I have been searching, and I have found this:

Issue with IE not calling JQuery .load() function on page refresh - traced to image caching

Adding the query string to the image, always loads it from server, and .load() and .error() methods works properly, however the site is quite too big, and I really can't load all images in site every time from server, without loading it from cache.

Any ideas of how make work this methods, without load from server every time the images for IE, or other way to check if image has been loaded correctly or not that work in IE?

Thanks in advance

Answer 1

This is a very old bug that actually was fixed in all modern browsers except IE. They didn't trigger onload event if image was obtained from cache.

But there is a workaround that is well-known by every person who tried to create an image gallery in javascript a couple of years ago:)

Image DOM element has a property .complete that indicates whether image was loaded or not. You can check this property on script load. If image is in the cache img.complete will return true right after page loaded:

$('img').each(function(){
    //this code will not run in IE if image is in the cache
    $(this).on('load', function(){
       checkImage(this);
    });

    //this code will run if image is already in the cache
    if (this.complete) checkImage(this);
});

function checkImage(){
   //your code for checking image
}

Answer 2

Do you have access to the server? A better method may be using .htaccess to rewrite all requests for images to a PHP script, and then if the image is not found, serve the image not found image