Bir Image nesnesini bir javascript kullanarak bir div arka plan resmi olarak ayarlama

Question

İstemciye bir yükleme çubuğu gösteren arka plandan 4 resim yüklemek istiyorum
ve resimler indirileceği zaman bunları arka plan resimleri olarak 4 div bloğuna ayarlamak istiyorum .

Böyle bir şey arıyorum.

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

Görüntü javascript nesnesini kullanarak bir arka plan resmi ayarlamanın herhangi bir yolu var mı?

Answer 1

Yaptıklarınıza yakın bir şey yapabilirsiniz. Görüntü nesnesi olarak bir görüntü arka planı ayarlamazsınız, ancak görüntü nesnesinden .src özniteliğini alabilir ve bunu backgroundImage uygulamasına uygulayabilirsiniz. Görüntü nesnesi başarıyla yüklendikten sonra, görüntü tarayıcı tarafından önbelleğe alınacak ve böylece .src'yi başka bir nesneye ayarladığınızda görüntü hızlı bir şekilde yüklenecektir. Sen bu kod türünü kullanabilirsiniz:

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

görüntü sadece her biri içine yüklüyormuş, resim yükler başarıyla örnek dururken zaman yüklenecek sayfadaki nesneleri karar vermektir Bu kodun eksik parçası aynı sayfa nesnesi, yüklendikleri anda, muhtemelen istediğiniz gibi değil. Ne istediğini bilmediğin ve belirtmediğin için, kodun o kısmını dolduramam.

Resimlerle .onload olayını kullanırken dikkat edilmesi gereken bir şey .src özniteliğini ayarlamadan önce .onload handler ayarını ayarlamanız gerekiyor. Eğer yoksa, görüntü önbelleğe alınmışsa (ve hemen yüklenirse) .onload olayını kaçırabilirsiniz.

Answer 2

Bu sayede, görüntü, satır satır satır yerine yüklendiğinde anında bir arada görünür.

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