Jquery Preloader a cessé de fonctionner IE

Question

Edit:

J'ai un multiple de script préchargement d'image que je vais avoir des problèmes avec inclusifs, et les gens ont dit que la raison est en raison de la mise en cache. Je suis actuellement exporing toutes les alternatives qui me permettraient de:

• précharger un ensemble prédéfini d'images parce que mon contenu est chargé via ajax
• autorisés à mettre ces images comme arrière-plans css

Here's the demo site (fonctionne dans tous les navigateurs IE), sauf

Et voici ce que le code ressemble en ce moment:

Il semble long, mais il est la plupart du temps il suffit de répéter le 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'); } 


}); 

J'apprécie la contribution de tous, merci :)

Answer 1

c'est fondamentalement votre application, le chargement des images + html réécrite pour utiliser Différé objet

http://jsfiddle.net/roberkules/hH8YN/ jQuery -> fonctionne pour moi sur IE8, FF9 & Chrome16

la partie principale du script est:

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... 
    } 
}); 

(ont dû utiliser des hacks mineures, juste parce que le contenu est sur votre hôte, si évidemment vous pouvez supprimer ces hacks pour votre page)

Answer 2

Votre d'images pré-chargement ne prend pas en compte l'image être mis en cache. S'il est mis en cache, il ne peut pas toujours déclencher l'événement de chargement.

Voici un plugin qui précharge les images.

https://github.com/tentonaxe/jQuery-preloadImages

Answer 3

Essayez plutôt ...

$(function() { 
    var imgCount = $("img").length; 
    $("img").one("load", function() { 
     imgCount--; 
     if (imgCount == 0) finish(); 
    }).each(function() { 
     if (this.complete) $(this).load(); 
    }); 
}); 

Fondamentalement, sur document.ready il obtient un compte de toutes les images et attend jusqu'à ce qu'ils ont tous chargés avant de tirer la finition() méthode. Ne vous inquiétez pas des valeurs booléennes dans finish() - faites juste un commentaire. Également commentez tous vos gestionnaires .load().

Cela prend en compte la mise en cache, avec la vérification (this.complete). Je l'ai largement utilisé et cela s'est avéré très utile.