14

我想从背景加载 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 对象设置背景图像？

4

2 回答 2

28

你可以做一些接近你所拥有的事情。您没有将图像背景设置为图像对象，但您可以.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如果图像已被缓存（因此它会立即加载），您可能会错过该事件。

于 2012-03-20T16:04:51.997 回答
0

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

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;
    });        
}
于 2018-01-13T22:52:03.947 回答