3

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

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

这是唯一的方法吗，还是我应该做类似的事情......

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

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

4

3 回答 3

2

我不确定我是否正确理解了您的问题。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() );
}
于 2012-11-16T01:45:44.513 回答
1

我可能会将它们构建为一个数组，而不是用一堆指向不同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，您可以选择使用对象{}而不是 Array[]并将其属性设置为小的描述性字符串。你甚至可以通过一个数组来初始化它：

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 关联数组，但如果您需要按名称而不是上面数组方法中的数字键，则可以轻松访问图像。

于 2012-11-16T01:43:00.253 回答
0

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

如果你这么说的话：

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);

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

于 2012-11-16T01:48:47.557 回答