jquery append 不适用于重复的图像对象引用答案

【问题标题】：jquery append does not work for duplicate image object referncejquery append 不适用于重复的图像对象引用
【发布时间】：2012-04-10 04:17:56
【问题描述】：

我有 10 张图片，每个图像以特殊字体表示数字 0-9（因此图像）

为了提高性能和延迟，我预先加载了如下图片：

 function createDigit() {
     for (var i = 0; i < 10; i++) {
         var obj = new Image;
         obj.src = 'digit' + i + '.png';
         digitHash[i] = obj;
     }
  }

所以在数字哈希中，我有从0到9索引的键，每个对应的值都是图像对象引用，src映射到图像文件位置。

现在在我的 html 中，我有一个 div 标签

<div id='digits'></div>

现在说我想显示“2000” 所以我有以下jquery

$('#digits').append(dightHash[2], dightHash[0], dightHash[0], dightHash[0]);

它只显示“20” 在 Firefox 控制台中进行一些调试和打印后，我注意到当您多次附加相同的图像引用时会发生这种情况！换句话说，'2000' 中的第二个零和第三个零没有附加，因此我们只有 '20'

如果我附加以下内容：

$('#digits').append(dightHash[2], dightHash[3], dightHash[4], dightHash[5]);

我得到了“2345”的完整显示，因为附加中没有重复的图像参考

我该如何解决这个问题？除了jquery的append方法我还能用吗？？

谢谢

【问题讨论】：

标签： javascript jquery html image dom

【解决方案1】：

如前所述，.append() 将对象从它所在的任何位置移动到指定位置。它不会复制对象。

因此，我建议您像这样创建所需的对象，然后您不必担心重复的数字，因为它们每个都会以这种方式获得自己的图像对象：

// create an individual image
function makeDigit(n) {
    var img = new Image();
    img.src = 'digit' + n + '.png';
    return(img);
}
// Force all images into browser memory cache for fast loading:
function cacheDigits() {
     for (var i = 0; i < 10; i++) {
         digitHash.push(makeDigit(i));
     }
}


$('#digits').append(makeDigit(2), makeDigit(0), makeDigit(0), makeDigit(0));

【讨论】：

谢谢先生，我赞成你的回答，因为我只能接受一种解决方案。我选择了另一个答案，因为它需要对我的代码进行最少的代码更改，但是您的解决方案也可以。谢谢！！

【解决方案2】：

是的，append 实际上是在你的 DOM 中移动，而不是自动复制你正在附加的对象。

您可以调用.clone()，以便附加获取图像的副本并附加它，而不是在参考中移动

$('#digits').append(dightHash[2], $(dightHash[0]).clone(), $(dightHash[0]).clone(), $(dightHash[0]).clone());

【讨论】：