0

我有 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的附加方法之外，还有其他方法吗？

谢谢

4

2 回答 2

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));
于 2012-04-10T04:39:42.020 回答
0

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

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

$('#digits').append(dightHash[2], $(dightHash[0]).clone(), $(dightHash[0]).clone(), $(dightHash[0]).clone());
于 2012-04-10T04:21:12.937 回答