使用CSS精灵负载标志

[tavenger5]

我一直在尝试与CSS精灵最近发现，它可以减少服务器上调用显着下降。他们所有的标志可以加载一次，而不是一个又一个。这将有效地消除52个服务器调用。不幸的是，有没有简单的方法将其转换成一个精灵的标志，因为img标签在代码中动态建。

有一些信息： 创建简单而有用的的CSS精灵|定制CSS地球

CSS精灵发生器

对不起，最近的所有建议

编辑 - 我想我发现了一个办法做到这一点。精灵的名称，标志/语言的名称相对应。一些“vbenterprisetranslator_flag”的编辑工作。

因此，它会是这个样子：（IMG SRC的变化）

<a rel="novbseo" href="$url" <if condition="$code==$vbulletin->options['vbenterprisetranslator_forumlanguage']">onclick="document.cookie = 'vbet_language=; expires=Thu, 01-Jan-1970 00:00:01 GMT; path=/'; return true;"</if>><img class="sprite $code" src="/clear.gif" alt="$name" <if condition="$vbulletin->options['vbenterprisetranslator_flags_noborder'] && !$highlight">border="0"</if><if condition="$highlight">border="1" style="border-color: yellow"</if>/></a>

[vBET]

我们会研究这个想法接近 在这个时刻，我们必须了解CSS精灵，它真的可以提高性能（浏览器缓存图像反正）。要求把考虑

[tavenger5]

顺便说一句，我只是用来实现（我不使用所有52个，但13最常见的）

vbenterprisetranslator_flag改变上述（精灵可以重新命名任何 - 我用“标志”）

此图片：


这增加了额外的CSS：

.sprite {background:url(/images/flags.png); width: 16px; height: 11px;}

	.ar {background-position: -0px -0px;}
	.zh-CN {background-position: -17px -0px;}
	.en {background-position: -34px -0px;}
	.fr {background-position: -51px -0px;}
	.de {background-position: -68px -0px;}
	.it {background-position: -85px -0px;}
	.ja {background-position: -102px -0px;}
	.ko {background-position: -119px -0px;}
	.pl {background-position: -136px -0px;}
	.pt {background-position: -153px -0px;}
	**** {background-position: -170px -0px;}
	.es {background-position: -187px -0px;}
	.nl {background-position: -204px -0px;}

[vBET]

据我所知突出积极的语言将不再工作了吗？

我们将看看结束

[tavenger5]

积极的语言仍然突出 - 使用精灵使用类的一个风格

[vBET]

尼斯 我们明确地将检查。无论如何 - 首先，我们必须从vBET4.x vBET3.x似乎现在更重要的移动性能改进了很多工作。但平静 - 我们对您的要求TODO列表

[Snake]

我有这个半的工作，但我所有的图像都是相同的的第一个标志，在sprite。

[vBET]

完成。将在下一版本的支持 - 所有标志用于地方