Imposta un oggetto immagine come immagine di sfondo div usando javascript

Question

Voglio caricare 4 immagini dallo sfondo mostrando una barra di carico al client
e quando le immagini verranno scaricate voglio impostarle come immagini di sfondo su 4 blocchi div .

Sto cercando qualcosa di simile.

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]; 

C'è un modo per impostare un'immagine di sfondo utilizzando un oggetto immagine javascript?

Answer 1

Puoi fare qualcosa di simile a quello che avevi. Non si imposta uno sfondo immagine come oggetto immagine, ma è possibile ottenere l'attributo .src dall'oggetto immagine e applicarlo a backgroundImage. Una volta che l'oggetto immagine è stato caricato correttamente, l'immagine verrà memorizzata nella cache dal browser, quindi quando si imposta .src su qualsiasi altro oggetto, l'immagine verrà caricata rapidamente. È possibile utilizzare questo tipo di codice:

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 mancante di questo codice è decidere quali oggetti sulla pagina da caricare, che immagine in cui l'immagine viene caricata con successo come ad esempio in piedi, si erano appena caricando ciascuno in lo stesso oggetto della pagina non appena sono stati caricati, il che probabilmente non è quello che vuoi. Poiché non so davvero cosa volevi e non hai specificato, non posso compilare quella parte del codice.

Una cosa a cui prestare attenzione quando si utilizza l'evento .onload con le immagini è che devi impostare il gestore .onload prima di impostare l'attributo .src. Se non lo fai, potresti perdere l'evento .onload se l'immagine è già nella cache (e quindi carica immediatamente).

Answer 2

In questo modo, l'immagine viene visualizzata immediatamente tutto in uno una volta caricata anziché riga per riga.

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