Question

我正在生成一个大型HTML表格，并且我为许多单元格使用图像。例如，一列可能具有竖起图像或竖起图像。如果我有300行，其中200个竖起大拇指，它们都有

 <a href="link"><img src="http://myserver.com/thumbsup.png"></a>

所以看起来我要去服务器200次以获得相同的图像，而且对于拇指朝下的图像也是100次。

有什么方法可以提高效率吗？浏览器是否认识到这一点并获取图像的缓存值？

返回包含大量重复图像的大型HTML表时，最佳做法是什么？

Answer 1

每个浏览器都会缓存图像，只下载一次。

Answer 2

我会创建一个带有background属性的css类。由于css已缓存且小于300 src="http://myserver.com/thumbsup.png"，因此您的html在每次调用页面时都会变小。

检查this thread以获取有关css背景图片的更多信息，有利有弊。

Answer 3

正如乔丹所说，浏览器会在第一次下载后缓存图像。但是如果要加载大量图像，则应考虑制作image sprite。

Answer 4

如上所述，使用css sprites。只记得在锚中添加一个文本，因为禁用css的人（屏幕阅读器）和搜索引擎只会看到一个空白链接（然后是文本缩进：-9999px;这个文本通过css使它不显示在前面的背景图片）。它也将有助于你的SEO。

例如：

<style type="text/css">
a.th-up{
    background-image:url(http://myserver.com/sprite.png);
    background-position:-10px -20px; /*or whatever the "thumbsup" image's coordinates are in your sprite*/
    text-indent:-9999px;
}
</style>
<a href="link" class="th-up">Thumbs Up!</a>

Answer 5

在这种情况下我会使用css。

如何在HTML表格中优化多个重复图像

5 个答案: