IE 11 broken image issue

Recently we faced a strange issue in one of sites we have developed in WordPress. We are displaying thumbnail images on a page. The site looks great in Firefox, Chrome and Safari. But in IE, some of images were broken, it just showed a red cross instead of the image. And if we checked image source or we open image in a new tab, image loads successfully. If we refresh page, all images now show up on page. The issue was with first time page load, after that it just works.

We were able to solve this problem with JS code that reloads an image if it does not load properly in first attempt.

Here is the git repository location and JS site link where this code is located:

https://github.com/desandro/imagesloaded
http://imagesloaded.desandro.com/

Java script added is:

var imgLoading = ImagesLoaded(document);

imgLoading.done(function () {
    console.log('All images loaded successfully');
    console.log('Images: ', this.images);
                            });

imgLoading.fail(function () {
    console.error('One or more images have failed to load');
    console.log('Proper images: ', this.proper);
    console.log('Broken images: ', this.broken);
                            });

imgLoading.always(function () {
    if (this.isDone) {
        console.log('All images loaded successfully');
                     }
    if (this.isFailed) {
        console.error('One or more images have failed to load');
                       }
    console.log('Proper images: ', this.proper);
    console.log('Broken images: ', this.broken);
                                }
                  );

imgLoading.progress(function (img, isBroken) {
    console.log('This image has finished with loading:', img);
    console.log('The image is ' + (isBroken ? 'broken' : 'properly loaded'));
          if (isBroken){
      img.src = img.src+"?time=" + new Date();
                       }
    // Current state of loading
    console.log('Pending images:', this.pending);
    console.log('Loaded images:', this.loaded);
    console.log('Proper: ', this.proper);
    console.log('Broken: ', this.broken);
                                             }
                   );

Main method is imgLoading.progress(function (img, isBroken).

A simple logic is added to this method to reload image if broken, by added a time stamp to it, just to force reload image so that browser thinks of it as a new URL and goes to server to load it instead of from Cache. Like this:

if (isBroken)
{
      img.src = img.src+"?time=" + new Date();
}

And that is it. Now image will be reloaded at least once if broken.

Webner Solutions is a Software Development company focused on developing CRM apps (Salesforce, Zoho), LMS Apps (Moodle/Totara), Websites and Mobile apps. If you need Web development or any other software development assistance please contact us at webdevelopment@webners.com