如何用html，css，jquery等下载很多相同的图片？

Question

我有一个由64个方格组成的棋盘。在所有这些正方形中，板块的图片在浅色或深色方形图片中。同样对于格式问题，放置了一个清除骑士。我正在使用带有背景图片（浅色或深色板片）的div和带有各种骑士照片的div中的img。在下面的图片中，有一个过去的移动夜，1个当前的移动骑士，以及64个清晰的骑士照片在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>

我有css渲染董事会的照片：

.LightBoard{background-image: url(http://freethecube.com/kt/pics/LightBoard.png);}
.DarkBoard{background-image: url(http://freethecube.com/kt/pics/DarkBoard.png);}

清除骑士间隔的html：

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

如何在不下载许多相同图片的情况下下载许多相同的图片？

我不确定浏览器是否会下载图片的第一个实例，然后将相同的元素分配给相同的图片，或者所有这些图片都要下载多次。我本质上是在询问是否有一种更有效的方法，或者我担心带宽什么都没有。如果我每次刷新都不下载129张图片，我根本不会担心。

在您投票之前，请让我重新说明或详细说明问题的某个方面。

Answer 1

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

此外，您可能需要考虑为所有这些图片创建image sprite。这将有助于将那些许多小型网络请求减少到一个更大的网络请求，这是目前通过HTTP下载资源的更有效方式。

Answer 2

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