Hier habe ich einen einfachen Testcode, der einen Test der Bilder im Browser lädt. Hier habe ich das asynchrone Onload-Ereignis verwendet, um das Bild zu dom hinzuzufügen, nachdem es vollständig geladen wurde. Bilder laden ganz gut.Problem ist, wenn ich kontinuierlich die Seite mehrere Mal Bildsequenz ändern neu laden .Wie wenn Bild-2 vor Bild-1 geladen wird, wird manchmal Bild-3 zuerst geladen usw.Wie kann ich sicherstellen, dass Bilder nacheinander geladen werden, wie zuerst Bild1, dann Bild2, Bild3 usw., jedes Mal, wenn ich die Seite lade kann das tun

var images = ['cat1.png','cat2.jpg','cat3.jpg'];

var i = 0;
images.forEach(function(elem,index,arr){
   var image=new Image();
   image.onload = function(){
       document.body.appendChild(image);
       console.log(++i);
   };
   image.onerror = function(){
       console.log('error occured');

   } 
   image.src = elem;
   image.style.width = '300px';
   image.style.height = '300px';
});