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

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

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

- Georgios Syngouroglou

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事件加载图像时需要注意一点，你必须在设置.src属性之前设置.onload处理程序。如果不这样做，如果图像已经被缓存（因此立即加载），则可能会错过.onload事件。

- jfriend00

---

我在谷歌上搜索了很多，想找到一种将图像对象设置为背景图的方法，但是你的解决方案最接近我想要的。 - Georgios Syngouroglou

一个简单而优雅的编程技巧是：可以使用onerror来处理备份或404错误。 - Ronnie Royston

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

- Ronnie Royston