Question

我正在用JavaScript编程，我想知道是否有一种创建多个图像对象的“最佳”方法。以下面的代码为例。

var a = new Image();
var b = new Image();
var c = new Image();

这是唯一的方法吗，或者我应该做些什么......

var a = new Image(), b = a, c = a;

我只是想知道是否有不同的方法来做第一种方法。我发现我的程序包含了更多的“new Image()”变量，我认为重复是对代码不好的。

Answer 1

我不确定我是否理解你的问题。如果代码需要，我根本不相信将三个变量声明为三个不同的new Image()是不对的。事实上，我非常喜欢它，因为它使代码在我看来更具可读性。

但是，如果您开始尝试稍微不同，可以试试这个：

var a = new Image(), b = a.cloneNode( true ), c = a.cloneNode( true );

我不认为这是非常易读的。

如果代码允许，您也可以尝试在列表中初始化它们，这可能是首选方法。

var images = [];
for( var index = 0; index < 10; index++ ) {
    images.push( new Image() );
}

Answer 2

我可能会将它们构建为一个数组，而不是用一堆指向不同Image对象的独立变量来污染您的命名空间。

var imgs = [];
var numImgs = 10;
// In a loop, build up an array of Image objs
for (var i=0; i<numImgs; i++) {
  imgs.push(new Image());
  // Initialize properties here if necessary
  imgs[i].src = 'http://example.com';
}
// imgs now holds ten Image objects...
// Access them via their [n] index
img[3].src = 'http://stackoverflow.com';

这不会比创建多个变量更有效或更低效，但保持组织变得更加容易。您将在初始化时保存几行代码，但从长远来看，这相当于微优化，其效果可以忽略不计。

请注意，如果您确实需要每个Image的文本描述符，则可以选择使用对象{}而不是数组[]，并将其属性设置为小的描述性字符串。你甚至可以通过数组初始化它：

var imgNames = ['stackoverflow','google','example'];
var imgs = {}
// Initialize object properties in a loop
for (var i=0; i<imgNames; i++) {
  // Initialize a property in the object from the current array value using [] notation
  imgs[imgNames[i]] = new Image();
}
// Then you can access them by their property name:
imgs.google.src = 'http://www.google.com';
imgs.stackoverflow.src = 'http://stackoverflow.com';

这有点滥用对象的行为就像PHP或Perl关联数组一样，但如果您需要按名称而不是像上面的数组方法中的数字键那样提供对图像的轻松访问。

Answer 3

第二种方式是相同的图像。

如果你这样说：

b = a;
c = b;

如果a是一个对象，那么b和c只是指向同一个对象的引用。

如何制作加载图像的功能？

function loadImage(name, optionalCallback) {
    var img = new Image();
    if (typeof optionalCallback === "function") { img.onload = optionalCallback; }
    img.src = name;

    return img;
}

然后你可以说：

var a = loadImage("images/image01.png", function () { document.body.appendChild(this); }),
    b = loadImage("images/image02.jpg", function () { gallery.addImage(this); });

当你走得更远的时候，你可以做更多的事情 - 当你进入Promises等等时，你可以用这些图像做很多事情。

另外，如果您正在编写类似于以下内容的程序，则可能需要小心：

var a = new Image();
a.src = "images/image01.jpg";
document.getElementById("gallery").appendChild(a);

如果您到达将图像添加到页面的代码部分，则在图像加载完成之前，您可能会得到意外的结果。

在JavaScript中创建多个图像对象

3 个答案: