创建图像对象数组

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

你最好的选择是使用一种工厂和.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">?
]