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

我想从显示加载条的背景向客户端加载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];

var myImages=newarray（）；
对于（变量i=0；i<4；i++）
myImages[i]=新图像（）；
//使用src属性加载图像
//并执行一个加载事件函数，在其中执行类似的操作。
var div0=document.getElementById（'theDivId'）；
div0.style.backgroundImage=myImage[index]；

---

是否有任何方法可以使用图像javascript对象设置背景图像？

您可以做一些接近您所拥有的东西。您不需要将图像背景设置为图像对象，但可以从图像对象获取

.src

属性并将其应用于背景图像。成功加载图像对象后，浏览器将缓存图像，因此当您在任何其他对象上设置.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;
}

var imgSrcs=[…]；//URL数组
var myImages=[]，img；
对于（变量i=0；i<4；i++）{
img=新图像（）；
img.onload=函数（）{
//决定将此图像加载到页面上的哪个对象
//缺少这部分代码，因为您没有解释如何
//想让它工作吗
var div0=document.getElementById（'theDivId'）；
div0.style.backgroundImage=“url（“+this.src+”）；
};
img.src=imgSrcs[i]；
myImages[i]=img；
}

这段代码缺少的部分是确定页面上的哪些对象要加载哪个图像当图像加载成功时，正如您的示例所示，您只是在加载完所有对象后立即将它们加载到同一页面对象中，这可能不是您想要的。因为我不知道你想要什么，你也没有指定，所以我无法填写代码的这一部分

---

对图像使用

.onload

事件时需要注意的一点是，在设置

.src

属性之前，必须先设置

.onload

处理程序。如果不这样做，则如果图像已缓存（因此它会立即加载），则可能会错过

.onload

事件。

这样，图像加载后会立即显示，而不是逐行显示

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

---

我在谷歌上搜索了很多，想知道是否有办法将一个图像对象设置为背景图像，但你的解决方案最接近我想要的。简单，优雅。