Ladda flaggor med en css sprite

[tavenger5]

Jag har experimenterat med CSS sprites nyligen och fann att det kan skära ned på servern kräver betydligt. Med dem alla flaggor kan laddas på en gång istället för en efter en. Detta skulle i praktiken avskaffa 52-server samtal. Tyvärr finns det inget enkelt sätt att konvertera flaggor till en sprite sedan img-taggar är dynamiskt byggs i koden.

Det finns en del info här: Skapa enkla och användbara CSS sprites | CSS Globe (http://cssglobe.com/post/3028/creating-easy-and-useful-css-sprites)

CSS Sprites generator (http://csssprites.com/)

Ledsen för alla förslag nyligen:)

Redigera - Jag tror att jag hittat ett sätt att göra det. Namnet på spriten har just för att motsvara namnet på den flagga / språk. Några redigering av "vbenterprisetranslator_flag 'bör fungera.

Så det skulle se ut ungefär så här: (se ändringen i 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]

Vi kommer att titta närmare på denna idé:) Just nu har vi att lära sig om css sprite och gör det verkligen kan öka prestandan (webbläsare cachning bilder ändå). Begär tas i beaktande:)

[tavenger5]

BTW, här är vad jag bara användas för att genomföra den (jag använder inte alla 52, men de 13 vanligaste)

Övergången till vbenterprisetranslator_flag ovan (sprite kan döpas om vad som helst - jag använde "flaggor")

Denna bild:
http://files.cellphoneforums.net/images/flags.png

Detta läggs till extra 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]

Som jag förstår lyfta aktivt språk fungerar inte längre?

Vi kommer att titta närmare på den:)

[tavenger5]

aktivt språk höjdpunkter fortfarande - som använder en stil där sprites använda en klass

[vBET]

Nice:) Vi definitivt kommer att kolla upp det. Hur som helst - första har vi mycket arbete med rörliga prestandaförbättringar från vBET4.x till vBET3.x vilket verkar vara viktigare just nu. Men var lugn - vi har din förfrågan på TODO lista:)

[Snake]

Jag har en semi-arbete, men alla mina bilder är samma första flaggan i spriten.

[vBET]

Klar. Kommer att stödjas i nästa version - för alla platser där flaggor används:)