Load flagg med en css sprite

[tavenger5]

Jeg har vært eksperimentert med CSS sprites det siste og funnet ut at det kan kutte ned på server samtaler betydelig. Med dem alle flaggene kan lastes samtidig istedenfor etter hverandre. Dette vil effektivt eliminere 52 server samtaler. Dessverre finnes det ingen enkel måte å konvertere flaggene til en sprite siden img taggene er dynamisk bygget i koden.

Det er litt info her: Lage enkle og nyttige CSS Sprites | Css Globe

CSS Sprites generator

Sorry for alle forslagene i det siste

Edit - Jeg tror jeg har funnet en måte å gjøre det. Navnet på sprite har nettopp å tilsvare navnet på flagget / språket. Noen redigering av 'vbenterprisetranslator_flag' skal fungere.

Så det ville se omtrent slik ut: (se endringen 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 vil se nærmere på denne ideen På dette tidspunktet har vi å lære om css sprite og det gjør den virkelig kan forbedre ytelsen (nettlesere er caching bilder uansett). Be satt i betraktning

[tavenger5]

btw, her er hva jeg bare brukes til å implementere det (jeg bruker ikke alle 52, men de 13 vanligste)

Endringen til vbenterprisetranslator_flag ovenfor (sprite kan få nytt navn uansett - jeg brukte 'flagg')

Dette bildet:


Dette legges til ekstra 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 jeg forstår fremheve aktivt språk vil ikke fungere lenger?

Vi vil se tett på den

[tavenger5]

aktivt språk fremhever likevel - som bruker en stil der sprites bruker en klasse

[vBET]

Nice Vi definitivt vil sjekke det. Uansett - første har vi mye arbeid med å flytte ytelsesforbedringer fra vBET4.x til vBET3.x som synes være viktigere akkurat nå. Men vær rolig - vi har din forespørsel på TODO listen

[Snake]

Jeg har denne semi-arbeid, men alle bildene mine er de samme første flagget, i sprite.

[vBET]

Ferdig. Vil bli støttet i neste versjon - for alle steder der flagg blir brukt