javascript - 创建图像对象数组

Question

我正在尝试创建一个图像对象数组，但遇到困难。每个对象都将保存一张图片和图片说明。

当我将下面的代码粘贴到 Firebug 中进行检查时，它工作正常:

示例 1

var imageArray = new Array();

imageArray[0] = new Image();
console.log(imageArray[0]);  //result is <img>

imageArray[0].src = "my-image-01.png";
console.log(imageArray[0]); // result is <img src="my-image-01.png"/>

imageArray[0] = {imageCaption: "A caption for the image"};  //an object
console.log(imageArray[0].imageCaption) //result is: A caption for the image

imageArray[1] = new Image()

...等等

但是，我认为以下内容更有意义，但它一直在抛出错误，我不明白为什么。

示例 2

var imageArray = new Array();

imageArray[0]= {
    image01: new Image(),
    image01.src: "my-image-01.png",  //"SyntaxError: missing : after property id"
    imageCaption: "An image caption"
    };

imageArray[1] = {
    image02: new Image().
    image02.src: "my-image-02.png",
    imageCaption: "Another image caption"
    }

谁能解释一下上面的代码有什么问题？我发布的第一个例子是我应该使用的方法吗？非常感谢

Answer 1

你最好的选择是使用一种 factory和 .push到图像数组。

尝试这样的事情

// Image factory
var createImage = function(src, title) {
  var img   = new Image();
  img.src   = src;
  img.alt   = title;
  img.title = title;
  return img; 
};

// array of images
var images = [];

// push two images to the array
images.push(createImage("foo.jpg", "foo title"));
images.push(createImage("bar.jpg", "bar title"));

// output
console.log(images);

输出

[
  <img src=​"foo.jpg" title=​"foo title" alt="foo title">​, 
  <img src=​"bar.jpg" title=​"bar title" alt="bar title">​
]