Question

我想从背景中加载4张图片，向客户端显示加载栏当下载图像时，我想将它们设置为4个div块的背景图像。

我正在寻找类似的东西。

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

有没有办法使用Image javascript对象设置背景图片？

Answer 1

你可以做一些接近你所拥有的事情。您不将图像背景设置为图像对象，但可以从图像对象获取.src属性并将其应用于backgroundImage。成功加载图像对象后，浏览器将缓存图像，因此当您在任何其他对象上设置.src时，图像将快速加载。您可以使用这种类型的代码：

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

这段代码的缺失部分是决定页面上的哪些对象在图像加载成功时加载哪个图像，就像你的例子一样，你只需将它们加载到同一个页面对象中不是你想要的。因为我真的不知道你想要什么，而你没有指明，我无法填写代码的那一部分。

将.onload事件与图片一起使用时需要注意的一件事是，在设置.onload属性之前，必须先设置.src处理程序。如果不这样做，如果图像已经缓存（因此会立即加载），您可能会错过.onload事件。

Answer 2

这样，图像一旦加载就会立即显示在一起，而不是逐行显示。

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

使用javascript将Image对象设置为div背景图像

2 个答案: