Comment détecter quand les images chargées par AJAX sont entièrement téléchargées?

Question

Je travaille sur un site web où la page d'accueil a une bannière rotative. Lorsque la page est chargée, une requête AJAX est effectuée pour récupérer le reste des bannières (dont chacune a une image large de 960 pixels). J'ai joué avec l'idée de charger la page normalement avec toute la bannière HTML chargée, mais le public cible du site n'est pas toujours garanti d'être sur une connexion flamboyante, et je voulais que la page d'accueil se charge rapidement. De plus, je ne voulais pas de tags H1 contradictoires. La page en question est la page d'atterrissage à http://www.gosihanoukville.com/

Si vous êtes sur une connexion lente, les bannières se chargeront et commenceront à se déplacer (rotation) avant que les images d'arrière-plan aient fini de se charger. Je me demande s'il existe un moyen de détecter si une image a été entièrement téléchargée avant que le script commence à déplacer les bannières.

Je n'inclut pas le code ici, car il est mieux vu sur le site mentionné ci-dessus. Le fichier JS utilisé est 'landing.js'

Merci pour toute aide - cela me rend fou.

Answer 1

je normalement faire:

var imagesToLoad = []; 
var imagesLoaded = 0; 

// Register this handler using whatever framework you like 
var whenImageLoaded = function(){ 
    if (++imagesLoaded == imagesToLoad.length){ 
    // Start moving the banners. 
    } 
}