Javascript 如何使用html、css、jquery等减少下载相同图片的次数。？

我有一个由64个方块组成的棋盘。在所有这些方块中都有一张木板的图片，就像在明暗方块中一样。对于格式问题，也会放置一个清除骑士。我正在使用带有背景图片的

div

（浅色或深色板片）和带有各种骑士图片的

img

。在下面的图片中，有1张过去的移动之夜，1张当前的移动骑士，以及61张清晰的骑士图片在64张棋盘图片的顶部

如何下载多张相同的图片而不下载多张相同的图片？

例如：

呈现此内容的html片段是：

        <table id="game" class="gametable">
            <tbody>
                <tr>  
                    <td class="tdcls" id="0"><div class="DarkBoard 0"><img class="playpiece" src="http://freethecube.com/kt/pics/KnightClear.png" alt="KnightClear" height="80" width="80"></div></td>  
                    <td class="tdcls" id="1"><div class="LightBoard 1"><img class="playpiece" src="http://freethecube.com/kt/pics/KnightClear.png" alt="KnightClear" height="80" width="80"></div></td>  
                    <td class="tdcls" id="2"><div class="DarkBoard 2"><img class="playpiece" src="http://freethecube.com/kt/pics/KnightClear.png" alt="KnightClear" height="80" width="80"></div></td>  
                    <td class="tdcls" id="3"><div class="LightBoard 3"><img class="playpiece" src="http://freethecube.com/kt/pics/KnightClear.png" alt="KnightClear" height="80" width="80"></div></td>  
                    <td class="tdcls" id="4"><div class="DarkBoard 4"><img class="playpiece" src="http://freethecube.com/kt/pics/KnightClear.png" alt="KnightClear" height="80" width="80"></div></td>  
                    <td class="tdcls" id="5"><div class="LightBoard 5"><img class="playpiece" src="http://freethecube.com/kt/pics/KnightClear.png" alt="KnightClear" height="80" width="80"></div></td>  
                    <td class="tdcls" id="6"><div class="DarkBoard 6"><img class="playpiece" src="http://freethecube.com/kt/pics/KnightClear.png" alt="KnightClear" height="80" width="80"></div></td>  
                    <td class="tdcls" id="7"><div class="LightBoard 7"><img class="playpiece" src="http://freethecube.com/kt/pics/KnightClear.png" alt="KnightClear" height="80" width="80"></div></td>
                </tr>

以及Clear knight间隔符的html：

<img class="playpiece" src="http://freethecube.com/kt/pics/KnightClear.png" alt="KnightClear" height="80" width="80">

如何下载多张相同的图片而不下载多张相同的图片？

我不确定浏览器是否会下载图片的第一个实例，然后将类似元素分配给同一张图片，或者是否所有这些图片都下载了很多次。我本质上是在问，是否有一种更有效的方法来做这件事，或者我是在无缘无故地担心带宽。如果不是每次刷新都下载129张图片，我一点也不担心

---

在您否决投票之前，请让我重新措辞或进一步阐述问题的某一方面。

图像将由浏览器缓存，并且只下载一次。

浏览器将自动缓存对同一资源的多个请求。打开开发人员控制台（ctrl+shift+i）并查看“网络”选项卡以验证这一点。（确保未选中“禁用缓存”）

---

另外，您可能需要考虑为所有这些图像创建一个AN。这将有助于将这些小的网络请求减少为一个更大的请求，这是目前通过HTTP下载资源的更有效的方法

浏览器应该下载一次重复的图片，这将是在加载和运行游戏。谢谢。

<img class="playpiece" src="http://freethecube.com/kt/pics/KnightClear.png" alt="KnightClear" height="80" width="80">