javascript - js加载图片

Question

我有这个代码

    var a = new Image();
    a.src = objects.a.image;

    var b = new Image();
    b.src = objects.b.image;

    var x = new Image();
    x.src = objects.x.image;

我有大约 10 张这样的图像，有没有更好的方法将其加载到变量中？

Answer 1

这应该工作

for(var i in objects)
{
    if(objects[i].image)
    {
        var oImage = new Image();
        oImage.src = objects[i].image;
        // if you need the Image object you can store it somewhere
        objects[i].oImgObject = oImage;
     }
}

Answer 2

假设objects只包含图像，试试这个：

var imageList = [];
for (var i in objects) {
    var obj = objects[i];
    var img = new Image();
    img.src = obj.image;
    imageList.push(img);
}

Answer 3

您通常会使用数组来存储图像。

例如 ：

var arr = [];
for (var c='a'.charCodeAt(0); c<='x'.charCodeAt(0); c++) {
     var img = new Image();
     img.src = objects[String.fromCharCode(c)].image;
     arr.push(img);
}

如果您确实需要将它们作为变量添加到全局上下文中，您可以这样做：

for (var c='a'.charCodeAt(0); c<='x'.charCodeAt(0); c++) {
     var img = new Image();
     var name = String.fromCharCode(c);
     img.src = objects[name].image;
     window[name] = img; // better use somthing's else than window...
}

请注意，根据实际情况objects，可能会有更直接的解决方案。

Answer 4

您可以遍历 objects 对象的属性。每次迭代创建一个新图像，为其提供对象属性的来源。然后将其添加到数组中：

演示

var arrayOfImg = [];

for(var propt in objects){
    var image = new Image();
    image.src = objects[propt].image;
    arrayOfImg.push(image)
}

console.log(arrayOfImg);