Question

Edit:

I have a multiple image preloading script that I’m having problems with on IE, and people have mentioned that the reason is because of caching. I’m currently exporing any alternatives that would allow me to:

• Preload a predefined set of images because my content is loaded via ajax
• Be allowed to set those images as css backgrounds

Here’s the demo site
(works in all browsers except IE)

And here’s what the code looks like right now:

It looks long, however it’s mostly just repeat code

    var  src1 = 'img/map_bg_1680.jpg'
    , $img1 = $( '<img src="' + src1 + '">' );

    var  src2 = 'img/menu-background.png'
    , $img2 = $( '<img src="' + src2 + '">' );

    var  src3 = 'img/button01.png'
    , $img3 = $( '<img src="' + src3 + '">' );

    var  src4 = 'img/button02.png'
    , $img4 = $( '<img src="' + src4 + '">' );

    var  src5 = 'img/button03.png'
    , $img5 = $( '<img src="' + src5 + '">' );

    var  src6 = 'img/button04.png'
    , $img6 = $( '<img src="' + src6 + '">' );

    var  src7 = 'img/button05.png'
    , $img7 = $( '<img src="' + src7 + '">' );

    var  src8 = 'img/button06.png'
    , $img8 = $( '<img src="' + src8 + '">' );

    var  src9 = 'img/all_events_button.png'
    , $img9 = $( '<img src="' + src9 + '">' );

    var  src10 = 'img/all_venues_button.png'
    , $img10 = $( '<img src="' + src10 + '">' );

    var  src11 = 'img/event_finder_button.png'
    , $img11 = $( '<img src="' + src11 + '">' );

    var  src12 = 'img/today-button.png'
    , $img12 = $( '<img src="' + src12 + '">' );

    var  src13 = 'img/tomorrow-button.png'
    , $img13 = $( '<img src="' + src13 + '">' );

    var  src14 = 'img/some-other-day-button.png'
    , $img14 = $( '<img src="' + src14 + '">' );

    var  src15 = 'img/choose-button.png'
    , $img15 = $( '<img src="' + src15 + '">' );

    var  src16 = 'img/newsearch-button.png'
    , $img16 = $( '<img src="' + src16 + '">' );

    var  src17 = 'img/showresults-button.png'
    , $img17 = $( '<img src="' + src17 + '">' );

$(document).ready(function() { 

    $(".ajax").colorbox();




var img1loaded = false
  , img2loaded = false
  , img3loaded = false
  , img4loaded = false
  , img5loaded = false
  , img6loaded = false
  , img7loaded = false
  , img8loaded = false
  , img9loaded = false
  , img10loaded = false
  , img11loaded = false
  , img12loaded = false
  , img13loaded = false
  , img14loaded = false
  , img15loaded = false
  , img16loaded = false
  , img17loaded = false;

$img1.bind( 'load', function(){
    img1loaded = true;
    finish();
} );

$img2.bind( 'load', function(){
    img2loaded = true;
    finish();
} );

$img3.bind( 'load', function(){
    img3loaded = true;
    finish();
} );

$img4.bind( 'load', function(){
    img4loaded = true;
    finish();
} );

$img5.bind( 'load', function(){
    img5loaded = true;
    finish();
} );

$img6.bind( 'load', function(){
    img6loaded = true;
    finish();
} );

$img7.bind( 'load', function(){
    img7loaded = true;
    finish();
} );

$img8.bind( 'load', function(){
    img8loaded = true;
    finish();
} );

$img9.bind( 'load', function(){
    img9loaded = true;
    finish();
} );

$img10.bind( 'load', function(){
    img10loaded = true;
    finish();
} );

$img11.bind( 'load', function(){
    img11loaded = true;
    finish();
} );

$img12.bind( 'load', function(){
    img12loaded = true;
    finish();
} );

$img13.bind( 'load', function(){
    img13loaded = true;
    finish();
} );

$img14.bind( 'load', function(){
    img14loaded = true;
    finish();
} );

$img15.bind( 'load', function(){
    img15loaded = true;
    finish();
} );

$img16.bind( 'load', function(){
    img16loaded = true;
    finish();
} );

$img17.bind( 'load', function(){
    img17loaded = true;
    finish();
} );

function finish(){
    if( !img1loaded || !img2loaded || !img3loaded || !img4loaded || !img5loaded || !img6loaded || !img7loaded || !img8loaded || !img9loaded || !img10loaded || !img11loaded || !img12loaded || !img13loaded || !img14loaded || !img15loaded || !img16loaded || !img17loaded ){ return; }
            jQuery('#main-content-fiftyfive').load('index2.html', function() {
                $( '#bgDiv' ).css( 'background-image', 'url( ' + src1 + ')' ); 
                jQuery( '#viewport-container' ).css( 'background-image', 'url( ' + src2 + ')' );
                jQuery( '#events_map_button' ).css( 'background-image', 'url( ' + src3 + ')' );
                jQuery( '#event_search_tool_button' ).css( 'background-image', 'url( ' + src4 + ')' );
                jQuery( '#party_photos_button' ).css( 'background-image', 'url( ' + src5 + ')' );
                jQuery( '#taxi_finder_button' ).css( 'background-image', 'url( ' + src6 + ')' );
                jQuery( '#weather_forecast_button' ).css( 'background-image', 'url( ' + src7 + ')' );
                jQuery( '#contact_button' ).css( 'background-image', 'url( ' + src8 + ')' );

                $('#right-content').load('partytool.html', function() {

                    setPartyToolsButtons();

                    $('#whole-ajax-content-one').load('events.html', function() {
                        setDayChooserButtons();
                        $( '.preloader' ).fadeOut('slow', function() {
                            $( '#bgDiv' ).fadeIn('slow', function() {
                                $( '#table-holder' ).fadeIn('slow', function() {
                                initialConfig();
                        });
                    });
                });
            });     
        });
    });
}
if( $img1[0].width ){ $img1.trigger( 'load' ); }
if( $img2[0].width ){ $img2.trigger( 'load' ); }
if( $img3[0].width ){ $img3.trigger( 'load' ); }
if( $img4[0].width ){ $img4.trigger( 'load' ); }
if( $img5[0].width ){ $img5.trigger( 'load' ); }
if( $img6[0].width ){ $img6.trigger( 'load' ); }
if( $img7[0].width ){ $img7.trigger( 'load' ); }
if( $img8[0].width ){ $img8.trigger( 'load' ); }
if( $img9[0].width ){ $img9.trigger( 'load' ); }
if( $img10[0].width ){ $img10.trigger( 'load' ); }
if( $img11[0].width ){ $img11.trigger( 'load' ); }
if( $img12[0].width ){ $img12.trigger( 'load' ); }
if( $img13[0].width ){ $img13.trigger( 'load' ); }
if( $img14[0].width ){ $img14.trigger( 'load' ); }
if( $img15[0].width ){ $img15.trigger( 'load' ); }
if( $img16[0].width ){ $img16.trigger( 'load' ); }
if( $img17[0].width ){ $img17.trigger( 'load' ); }


});

I appreciate everyone’s input, thank you 🙂

Answer 1

this is basically your app, the loading of images + html rewritten to use jQuery’s Deferred Object

http://jsfiddle.net/roberkules/hH8YN/ -> works for me on IE8, FF9 & Chrome16

the main part of the script is:

var images = {
    'bg': 'img/map_bg_1680.jpg'
    // ...
};

var defer = $.Deferred();

var promise = $.when.apply($, $.merge([defer.promise()], $.map(images, function(value, key) {
    var d = $.Deferred(),
        img = $('<img />').attr('src', root_path + value).load(function() {
            console.log('loaded img', key, value);
            d.resolve();
        }).get(0);

    if (img.complete) {
        console.log('cached img', key, value);
        d.resolve();
    } else {
        window.setTimeout(function() {
            if (!d.isResolved()) {
                console.log('timeout img', key, value);
                d.resolve();
            }
        }, 15000); // e.g.: 15 seconds timeout
    }

    return d.promise();
})));

$(function() {
    $.get('index2.html', function(data) {
        console.log('loaded html', 'index2.html');
        $('#main-content-fiftyfive').html(data.responseText || data);
        defer.resolve();
    });

    promise.done(function() {
        // index2.html + images loaded...
    }
});

(had to use some minor hacks, just because the content is on your host, so obviously you can remove those hacks for your page)