如何使用许多重复图像加快页面加载时间？答案

【问题标题】：How to speed up page loading time with many recurring images?如何使用许多重复图像加快页面加载时间？
【发布时间】：2015-07-24 10:26:48
【问题描述】：

这个话题之前已经讨论过，但是我找不到任何适用的东西。

我有大量数据集（数以千计），我想显示这些数据集，然后通过 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 告诉我，它在Waiting 上浪费了大部分时间，这为我可以探索的问题提供了一个全新的角度。

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

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

【问题讨论】：

浏览器不会在一个页面中下载相同的图像两次，除非您弄乱了服务器设置（在标题中检查图像是否可缓存，查看浏览器开发环境的网络面板）或为图片提供不同的 URL
图片是缩略图吗？图像是否针对网络进行了优化（即文件大小最小化）？
你是如何加载页面的？你用flush()吗？
@DenysSéguret 服务器是 linux 机器上的标准 apache2。除了配置页面本身之外，我根本没有弄乱配置。不过我会再看一遍。但是，具有不同 URL 的图像将如何帮助我更快地加载它们？
@DavidFariña 不，它们是原始尺寸，专为该应用程序设计，每张图片高达 20x20 像素。

标签： javascript php jquery html

【解决方案1】：

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

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

【讨论】：

我马上去看看。感谢您的提示。

【解决方案2】：

你有几个选择：

使用惰性加载器，这样它只会在您到达图像时加载图像（应该大大加快一切速度
使用 PHP 进行分页并使用 AJAX 处理请求（我知道你想避免它，但把它放在这里以防其他人有问题）
或者一般只用PHP分页，不用AJAX

【讨论】：