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

Question

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

我正在寻找这样的东西。

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 事件时需要注意的一件事是，您必须在设置 .src< 之前设置您的 .onload 处理程序 属性。否则，如果图像已被缓存(因此会立即加载)，您可能会错过 .onload 事件。