Unable to pre-configure image preload in IE8

Question

I am working on an image slide show that allows users to cycle through a set of images in half-full screen mode. Here is his development version:

[link removed, only temp link was]

There are several ways to go to the next image: by clicking on a large image, selecting a specific finger, using arrow icons or even keyboard arrows. All of them basically call the js loadImage function with the correct parameters:

function loadImage(id,url) { // general image loading routine // enable loader indicator $("#loading").toggle(); var imagePreloader = new Image(); imagePreloader.src = url; loading = true; $(imagePreloader).load(function() { // load completed, hide the loading indicator $("#loading").toggle(); // set the image src, this effectively shows the image var img = $("#bigimage img"); img.attr({ src: url }); // reset the image dimensions based upon its orientation var wide = imagePreloader.width >= imagePreloader.height; if (wide) { img.addClass('wide'); img.removeClass('high'); img.removeAttr('height'); } else { img.addClass('high'); img.removeClass('wide'); img.removeAttr('width'); } // update thumb status $(".photos li.active").removeClass('active'); $("#li-" + id).addClass('active'); // get the title from the active thumb and set it on the big image var imgTitle = $("#li-" + id + " a").attr('title'); log(id + ":" + imgTitle); $(".caption h1").text(imgTitle); // loading routine completed loading = false; //return true; }); } 

There is a lot of material that is not relevant to the issue, but the main focus is on the actual pre-loading and display of the requested image. Everything works fine in both Firefox and Chrome, but nothing happens in IE8. Oddly enough, it works the first time I click on the next arrow or use the keyboard arrow, after which it just fails.

It's hard for me to debug this. When I go through the code, I see that the load event handler is never called, even though the URL is passed correctly. I tried with imagePreloader.onLoad (without jQuery), but this also has no effect. I was stuck debugging this and realizing why it was working the first time.

Answer 1

This seems to be related to image caching. In some cases .load() does not start the event handler when the image is cached in the browser cache. See this post on this issue.

See the $.fn.imagesLoaded jQuery plugin .