Question

我有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控制台中进行一些调试和打印后，我注意到当你多次附加SAME图像参考时会发生这种情况！换句话说，'2000'中的第二个零和第三个零没有被附加，因此我们只有'20'

如果我追加以下内容：

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

我得到'2345'的完整显示，因为附加的图像引用没有重复

如何解决此问题？除了我可以使用的jquery追加方法之外还有什么？

由于

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

Answer 2

是的，追加实际上是在您的DOM周围移动，而不是自动复制您要追加的对象。

您可以致电.clone()，以便追加获取您的图片副本并附加它而不是在参考文献中移动

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

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

2 个答案: