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

时间:2015-07-24 10:26:48

标签: javascript php jquery html

此主题已在之前讨论过,但我找不到任何适用的内容。

我有大量的数据集(数以千计),我想显示这些数据集,然后通过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在渲染大块时出现问题。所以是啊...我猜运气不好。

2 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:1)

您有多种选择:

  • 使用延迟加载程序,因此它只会在您到达时加载图像(应该大幅提升所有内容)
  • 使用PHP对请求进行分页和使用AJAX(我知道你想避免它,但是把它放在这里,以防其他任何人有问题进一步发展)
  • 或者通常只使用PHP来分页而不使用AJAX