IE8 image preloading -jQuery - Doing stuff after they are loaded

Question

I have a photo gallery website. There are 17 large images that I want to preload before allowing the user to click on any of the thumbnails. The idea is that when the final image is loaded, I can display the page and ensure that when a user clicks on a thumbnail, there is a large image to show (and not still loading). I do not know the image URLs until I retrieve a JSON-P like data from a $.getScript() call.

So, I have this code in http://www.stephentang.net/j/photoModule.js

$.each(self.jsonObj.imageItems, function(index) {
     $("<img />").attr("src", STP.HOSTNAME + self.jsonObj.imageItems[index].imgSrc).load(function() {
     num_left_to_load = num_left_to_load - 1;
     console.log('Left to Load: ' + num_left_to_load);
     if (num_left_to_load <= 0) {
       if (typeof callback === "function") {
            console.log('callback is triggered');
            $("#loading-div").remove();
            self.jqFilmstrip.css('display', 'block');
            self.jqFeaturedPhotoImg.css('display', 'block');
            callback.apply(context);
       }
     }
  });
});

I have put some console.log() statements. In FF3.5+ and Safari, the num_left_to_load reaches 0, which fires the callback function. In IE8 (and possibly IE7), num_left_to_load never reaches 0. As a result, the page is stuck in the "Loading..." message.

I'm not looking for a plug-in solution.

Thank you for reading.

EDIT: I have removed the "Loading..." message and no longer hide the page. It seems in IE8, after the first load, images are cached, so the load() method does not seem to work, still resulting in the counter not reaching 0.

EDIT: I tried window.ready(), but the window is loaded very quickly.

EDIT: It appears IE6-8 cache images on the first load, and then check the cache before making outbound requests, so .load() does not consistently work on them.

Answer 1

You want to wrap your code in $(window).ready(function(){...}); That will wait for all the images to load before running the code inside it.