負載標誌使用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]

尼斯 我們明確地將檢查它。無論如何 - 我們有很多第一次與移動性能提升到vBET3.x從 vBET4.x這似乎是更重要的現在。但要冷靜 - 我們有你的請求 TODO列表

[Snake]

我有這個半的工作，但我所有的圖像都是相同的第一個標誌，在精靈。

[vBET]

完成。將支持下一個版本 - 所有的地方標誌使用