Question

I have been using the following preload script to load all the images and then switch two divs display settings to prevent the user from seeing the site “put together”. The problem is, of course, IE 8 and down refuse to switch. I have looked into several preloader issues and bugs like this and they all reference caching, but I have yet to find an actual fix… Any help will be greatly appreciated. Here is the code:

The extension:

(function($) {
var imgList = [];
$.extend({
    preload: function(imgArr, option) {
        var setting = $.extend({
            init: function(loaded, total) {},
            loaded: function(img, loaded, total) {},
            loaded_all: function(loaded, total) {}
        }, option);
        var total = imgArr.length;
        var loaded = 0;

        setting.init(0, total);
        for(var i in imgArr) {
            imgList.push($("<img />")
                .attr("src", imgArr[i])
                .load(function() {
                    loaded++;
                    setting.loaded(this, loaded, total);
                    if(loaded == total) {
                        setting.loaded_all(loaded, total);
                    }
                })
            );
        }

    }
});
})(jQuery);

The code to call it:

$(function() {
<? if ($dir = opendir('images')) {
        $images = array();
        while (false !== ($file = readdir($dir))) {
            if ($file != "." && $file != "..") {
                $images[] = $file; 
            }
        }
        closedir($dir);
        foreach($images as $image) {
            if(stristr($image, '.')) 
            $preload .= "'images/".$image."',";
        }
        $preload = substr($preload, 0, -1);
    }?>

    $.preload([<?=$preload?>], 
    {
        loaded_all: function(loaded, total) {
            $('#main_loading').css('display', 'none');
            $('#container').css('display', 'block');
        }
    });

});

I forget where I originally found this code, but have modified it a little to meet my needs. Our dev site where this can be seen is: http://www.branninggroup.com/backbeat/media_player/

I put in a temporary fix so it partially works right now in IE by forcing a 10 second wait before displaying it, but would obviously rather be able to know when the images have all loaded to display the page…. any tips/advice would be greatly appreciated.

Answer 1

That plugin is doing things wrong, one of which is related to an issue with IE and the load event.

You need to define the load event, and then set the src property/attribute.

Try replacing it with…

(function($) {
var imgList = [];
$.extend({
    preload: function(imgArr, option) {
        var setting = $.extend({
            init: function(loaded, total) {},
            loaded: function(img, loaded, total) {},
            loaded_all: function(loaded, total) {}
        }, option);
        var total = imgArr.length;
        var loaded = 0;

        setting.init(0, total);
        for (var i = 0; i < total; i++) {
            imgList.push($("<img />")
                .load(function() {
                    loaded++;
                    setting.loaded(this, loaded, total);
                    if(loaded == total) {
                        setting.loaded_all(loaded, total);
                    }
                })
                .attr("src", imgArr[i]);

            );
        }

    }
});
})(jQuery);

I also changed the for (in) loop to a normal for loop. You don’t want to dredge up the prototype chain. You could also use $.each().