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

我正在生成一个大的HTML表格，并且我为许多单元格使用图像。例如，一列可能有竖起大拇指的图像或拇指向下的图像。如果我有300行，其中200个是竖起大拇指，他们都有如何在HTML表格中优化多个重复图像

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

所以好像我要去服务器200倍得到相同的图像，并且还在100倍的大拇指朝下的图像。

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

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

来源

2009-12-14 leora

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

来源

2009-12-14 03:24:21

我会创建一个具有背景属性的CSS类。由于css被缓存且小于300 src="http://myserver.com/thumbsup.png"，因此每个页面调用中的html会更小。

查看this thread获取更多关于css背景图片的信息，包括优缺点。

来源

2009-12-14 03:26:05 GmonC

正如乔丹所说，浏览器会在第一次下载后缓存图片。但是如果你有很多图片加载，那么你应该考虑制作一个image sprite。

来源

2009-12-14 05:15:52 Mottie

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

来源

2009-12-14 07:41:08 Davey

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

例如：

<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>

来源

2009-12-14 09:52:05

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

回答

相关问题