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.
Bir resim nesnesinin bir backgroundImage olarak ayarlanmasının bir yolu olup olmadığını bulmak için çok şey yapıyorum ama çözümünüz, istediklerime en yakın olanı. –
sade, zarif. ... bir şey: bir yedek/404'ler için onerror kullanabilir. –