2

我正在尝试制作棋盘。我设法将所有图像加载到图像数组中。这样我就不必反复向服务器请求图像。 （你会说浏览器缓存会管理，（如果有的话）但假设它不会）

所以我现在面临的问题是每个必须重复的图像，例如：棋子、空格、白车和骑士，在添加到表格单元格之后，然后重新添加到另一个表格单元格，并没有给出我两个棋子。但只有一个。我想那是因为它是一个单一的图像对象。

所以我想我每次必须使用它时都会克隆图像对象。那么克隆它的不同方法是什么。

我从来没有使用过 jQuery。所以我尝试在我的脚本中包含这段代码

function cloneBlank(blank,c) {
    var img = jQuery.extend({},blank[c]);
    return img;
}

错误：Uncaught ReferenceError: jQuery is not defined

（在这里阅读扩展方法：克隆 JavaScript 对象？）

我也读过这个.clone()方法，但不知道它是如何使用的

此外，这些方法中的任何一个是否确保不会从服务器重新请求图像，而只是将图像作为对象复制到内存中（否则拥有图像缓冲区的意义何在）。

其次，是否有任何方法可以确保这种行为。

4

2 回答 2

2

我的建议是有一个结合了所有元素图像的图像精灵。
这是一篇很好的文章。
在您的情况下，您的精灵看起来像这个
Css 示例：

  #chess .piece{
      position:absolute;
      background-image: url(http://bit.ly/12d8KST);
      width:45px;
      height:45px;
  }
  #chess .pawn{background-position: -56px -53px;}
  #chess .rook{background-position: 0px -53px;}

这是一个演示

于 2013-05-07T09:15:06.033 回答
1

好吧，如果您对浏览器缓存不满意，请以base64编码形式加载图像，然后使用<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />.

然后，您可以为 pawn、rooks 等设置 base64 编码数据，并src适当设置图像的属性。

请参阅Wikipedia 数据 URI 支持页面。

顺便说一句，我同意其他人的观点；你最好依靠浏览器缓存。无论如何，加载 64 张简单图像有什么问题？

于 2013-05-06T22:50:28.313 回答