javascript - 如何通过许多重复出现的图像来加快页面加载时间？

Question

这个主题之前已经讨论过，但我找不到任何适用的内容。

我有大量数据集(数以千计)，我想显示这些数据集，然后通过 JS 分页运行。

这显然需要我获取所有结果，这只需要几毫秒，而且几乎不会被注意到。

然而，在构建实际页面时，大量重复出现的图像导致页面加载时间超过 10 秒，这显然太长了。

我的问题相当简单:是否有某种方法可以告诉浏览器将每张图片只下载一次并重复使用，而不是明显地一遍又一遍地下载相同的图片？

或者您是否知道任何其他技巧来加快许多具有重复图片的数据集的页面加载速度？

如果可能的话，我希望避免通过 AJAX 进行分页。

我的表结构如下所示:

<table>
    <tr>
        <td>Number</td>
        <td>Image</td>
        <td>Image</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Image</td>
        <td>Text</td>
        <td>Image</td>
        <td>Image</td>
    </tr>
</table>

最后一张图像对于所有行都是相同的，对于图像一和图像二来说，它始终是两个不同图像之一，四是 13 个不同图像之一。

希望你能帮我一点忙。

编辑:感谢之前的回复，我设法摆脱了图像加载时间，这根据定义来说很棒，但它并没有真正减少我的加载​​时间那么多。

Firebug 告诉我，它把大部分时间都浪费在了等待上，这让我对我可以探索的问题有了一个全新的 Angular 。

感谢您到目前为止的帮助，如果我再次遇到困难，我会提出一个新问题。 :)

最后一点，问题似乎不是服务器/客户端传输连接，而是我的 Firefox 在渲染大块时出现问题。所以是的...我想我运气不好。

Answer 1

如果您在服务器上设置了正确的缓存，那么即使该图像在页面中多次使用，浏览器也不会下载相同的图像。

如果您的 Web 服务器是基于 apache 的，请前往此处配置您的 apache 配置或 .htaccess，以便为图像设置过期时间。 https://stackoverflow.com/a/447039/1716437