Charger les images les unes après les autres en JavaScript

Question

Mon problème est, j'ai plusieurs images et je veux charger comme préchargeur, mais le problème est que je veux commencer le chargement de la deuxième image après avoir terminé le premier. Dans mon code actuel, je stocke toutes les images dans un tableau et j'utilise une boucle pour charger toutes les images (donner la source de toutes les images du tableau à un objet image), puis toutes les images commencent à se charger.

Answer 1

Vous voulez jeter un coup d'œil à l'événement load.

function loadImagesInSequence(images) { 
    if (!images.length) { 
    return; 
    } 

    var img = new Image(), 
     url = images.shift(); 

    img.onload = function(){ loadImagesInSequence(images) }; 
    img.src = url; 
} 

loadImagesInSequence(['a.png', 'b.png', 'c.png']); 

Chaque fois qu'une image est chargée, l'événement de chargement est déclenché. Lorsque cela arrive, nous exécutons à nouveau loadImagesInSequence(). Nous ne chargerons pas la même image deux fois, car Array.shift() sera retirée du tableau que nous avons simplement traversé.