Vérifiez que toutes les images sont chargées dans la fonction $ (window) .load() `avant de continuer

Question

J'ajoute un certain nombre de grandes images pour un diaporama à une page, mais je veux commencer à charger ces images uniquement lorsque la partie normale de la page est complètement chargée (y compris les images).

Pour ce faire, je suis d'ajouter les images dans la fonction $(window).load():

var slide_total = 20; 

$(window).load(function() { 

    for (i = 2; i <= slide_total; i++) 
    { 
     content = '<li><img src="/images/header' + ((i < 10) ? '0' : '') + i + '.jpg" width="960" height="314"></li>'; 
     $("#slideshow li:last-child").after(content); 
    } 

    slide_interval = setInterval("slideSwitch()", slide_duration); 

}); 

Le diaporama slideSwitch() devrait commencer lorsque toutes les images sont complètement chargées, mais comme il est maintenant, il commence à l'heure actuelle la les éléments sont ajoutés au DOM.

Je ne peux pas déplacer la boucle vers la fonction document.ready car je ne veux pas que le diaporama interfère avec le chargement des images normales.

Comment puis-je vérifier si toutes les images sont chargées avant de régler l'intervalle?

Answer 1

Essayez ceci:

// get the total number of images inserted in the DOM 
var imgCount = $('#slideshow img').length; 

// initialize a counter which increments whenever an image finishes loading 
var loadCounter = 0; 

// bind to the images' load event 
$("#slideshow li img").load(function() { 

    // increment the load counter 
    loadCounter++; 

    // once the load counter equals the total number of images 
    // set off the fancy stuff 
    if(loadCounter == imgCount) { 
     slide_interval = setInterval("slideSwitch()", slide_duration); 
    } 
}).each(function() { 

    // trigger the load event in case the image has been cached by the browser 
    if(this.complete) $(this).trigger('load'); 
});