jquery的追加不重复的图像对象refernce

Question

工作我有一个10个图像，每个 图像表示数字0-9在一个特殊的字体（因此图像）

，以提高性能和延迟，我预-loaded下面的图像类似如下：

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方法我可以使用？

感谢

Answer 1

是的，实际上附加在你的DOM移动，而不是自动让你的追加对象的副本。

您可以拨打.clone()使追加把你的图像的副本并添加它，而不是围绕裁判移动

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

Answer 2

正如已解释，.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));