使用javascript将Image对象设置为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];

有没有办法使用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如果图像已经被缓存(因此它立即加载),您可能会错过该事件.