Aquí tengo un código de prueba simple que carga una prueba de imágenes en el navegador. Aquí usé un evento de carga asíncrono para agregar una imagen al dom después de que termina de cargarse. Las imágenes se cargan bien.El problema es que si recargo continuamente la página cambié la secuencia de la imagen varias vecesComo si la imagen-2 se cargara antes que la imagen-1, a veces la imagen-3 se carga primero, etc. Cómo puedo asegurarme de que las imágenes se carguen secuencialmente, como cargar primero la imagen1, luego la imagen2, la imagen3, etc. cada vez que cargue la página. ¿Haz eso?

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';
});