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

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

Demo

var arrayOfImg = []; 

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

console.log(arrayOfImg);