Establecer un objeto Imagen como una imagen de fondo div utilizando javascript

Question

Quiero cargar 4 imágenes del fondo que muestra una barra de carga para el cliente
y cuando las imágenes se descargarán quiero establecerlas como imágenes de fondo en 4 bloques div .

Estoy buscando algo como esto.

var myImages = new Array(); 
for(var i = 0; i < 4; i++) 
    myImages[i] = new Image(); 
//load images using the src attribute 
//and execute an on load event function where to do something like this. 
var div0 = document.getElementById('theDivId'); 
div0.style.backgroundImage = myImage[index]; 

¿Hay alguna manera de establecer una imagen de fondo con un objeto Image javascript?

Answer 1

Puede hacer algo parecido a lo que tenía. No establece un fondo de imagen para que sea un objeto de imagen, pero puede obtener el atributo .src del objeto de imagen y aplicarlo a backgroundImage. Una vez que el objeto de imagen se haya cargado correctamente, el navegador almacenará en caché la imagen, por lo que cuando configure el archivo .src en cualquier otro objeto, la imagen se cargará rápidamente. Se podría utilizar este tipo de código:

var imgSrcs = [...]; // array of URLs 
var myImages = [], img; 
for (var i = 0; i < 4; i++) { 
    img = new Image(); 
    img.onload = function() { 
     // decide which object on the page to load this image into 
     // this part of the code is missing because you haven't explained how you 
     // want it to work 
     var div0 = document.getElementById('theDivId'); 
     div0.style.backgroundImage = "url(" + this.src + ")"; 
    }; 
    img.src = imgSrcs[i]; 
    myImages[i] = img; 
} 

La parte que falta de este código está decidiendo qué objetos de la página se cargue el que la imagen en la hora de la imagen se carga con éxito como su ejemplo de pie, que se acaba de cargar cada uno en el mismo objeto de la página tan pronto como se carguen, lo que probablemente no sea lo que quieres. Como realmente no sé lo que quería y no especificó, no puedo completar esa parte del código.

Una cosa a tener en cuenta cuando se usa el evento .onload con imágenes es que debe establecer su controlador .onload antes de establecer el atributo .src. Si no lo hace, puede perderse el evento .onload si la imagen ya está en caché (y por lo tanto se carga inmediatamente).

Answer 2

De esta manera, la imagen aparece instantáneamente, todo en uno, una vez que se carga en lugar de línea por línea.

function setBackgroundImage(){ 
    imageIsLoaded(myURL).then(function(value) { 
     doc.querySelector("body > main").style.backgroundImage = "url(" + myURL + ")"; 
    } 
} 
function imageIsLoaded(url){ 
    return new Promise(function(resolve, reject){ 
     var img = new Image(); 
     try { 
      img.addEventListener('load', function() { 
       resolve (true); 
      }, false); 
      img.addEventListener('error', function() { 
       resolve (false); 
      }, false);  
     } 
     catch(error) { 
      resolve (false); 
     } 
     img.src = url; 
    });   
}