javascript - 无需请求服务器即可在 JS 中克隆图像对象的方法

Question

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

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

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

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

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

错误:Uncaught ReferenceError: jQuery is not defined

(在这里阅读扩展方法:Cloning a JavaScript object?)

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

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

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

Answer 1

我的建议是拥有一个将所有元​​素图像组合在一起的图像 Sprite 。
here这是一篇关于此的好文章。
在你的情况下，你的 Sprite 看起来像 this
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;}

这是一个 demo