Image de chargement imbriquée avec jquery

Question

Je dois charger 2 images ou plus hors de l'écran et les afficher avec une transition uniquement lorsque toutes sont chargées.

Je vais avoir quelques problèmes avec la charge() Voici ma fonction il montre un div avec un message de chargement, lorsque le img est chargé, il cache le message loadig et appeler une fonction à la transition visuelle (transizione ()

function load_img(sezione) { 
    if (sezione==1) {sfondo = "sfondo2.jpg"; footer = "footer1.jpg";} 
    else if (sezione==2) {sfondo = "sfondo3.jpg"; footer = "footer2.jpg";} 
    else if (sezione==3) {sfondo = "sfondo4.jpg"; footer = "footer3.jpg";} 
    else if (sezione==4) {sfondo = "sfondo5.jpg"; footer = "footer4.jpg";} 

    $("#loading").fadeIn(); 

    $("#sfondo2").load(function() { 
    $("#loading").hide(); 
    transizione(); 
    }).attr('src', 'img/'+sfondo); 

} 

Comment puis-je le modifier pour appeler 2 images? Je suis un peu confus avec la façon dont la charge() fonctionne pour les images

Merci

Giuseppe

Answer 1

La fonction « charge », pour les images, est utilisé pour mettre en place un gestionnaire d'événements. En d'autres termes, il vous permet de fournir une fonction à appeler lorsqu'une image est complètement chargée.

Si vous voulez attendre plus d'une image à charger, et quand ils sont tous chargés que vous voulez faire quelque chose, vous pouvez mettre en place quelque chose comme ceci:

var $images = $('#image1, #image2'), count = $images.length; 
$images.load(function() { 
    --count; 
    if (count === 0) { 
    // here the count is zero, so all images are ready 
    transizione(); // ? whatever you want 
    } 
}); 

Voir? Cela fait que toutes les images ont le même gestionnaire de "chargement", et ce qu'il fait est juste décompté jusqu'à ce que toutes les différentes images soient prêtes (parce que le compte sera nul).

Peut-être que je n'ai pas compris votre besoin ici, Gusepo.