PDA

View Full Version: Al gedaan Laad vlaggen met een css sprite



tavenger5
17-03-10, 16:54
Ik heb geëxperimenteerd met css sprites laatste tijd en vond dat het kan aanzienlijk bezuinigen op server oproepen. Met ze allemaal van de vlaggen konden worden geladen in een keer in plaats van een na de andere. Dit zou effectief elimineren 52 server oproepen. Jammer genoeg is er geen gemakkelijke manier om de vlaggen te zetten in een sprite, omdat de img-tags worden dynamisch opgebouwd in de code.

Er is hier wat info: Het creëren van eenvoudige en nuttige CSS Sprites | Css Globe (http://cssglobe.com/post/3028/creating-easy-and-useful-css-sprites)

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

Sorry voor alle suggesties laatste tijd:)

Edit - Ik denk dat ik een manier gevonden om het te doen. De naam van de sprite is net overeen te komen met de naam van de vlag / taal. Sommige bewerking van "vbenterprisetranslator_flag" zou moeten werken.

Dus het zou er ongeveer zo uit: (zie de verandering in de 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
17-03-10, 19:50
We zullen kijken nader op dit idee:) Op dit moment moeten we leren over css sprite en doet het echt kan verbeteren (browsers zijn caching beelden toch). Ingediende verzoek in overweging:)

tavenger5
17-03-10, 20:57
btw, hier is wat ik net gebruikt om het uit te voeren (ik heb geen gebruik maken van alle 52, maar de 13 meest voorkomende)

De wijziging van vbenterprisetranslator_flag hierboven (sprite kan wat worden hernoemd - Ik gebruikte 'vlaggen')

Dit beeld:
http://files.cellphoneforums.net/images/flags.png

Dit aangevuld met 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
17-03-10, 21:31
Zoals ik begrepen benadrukken actieve taal zal niet meer werken?

We zullen de loep op dat:)

tavenger5
17-03-10, 22:13
actieve taal hoogtepunten nog steeds - dat een stijl wordt gebruikt, waar sprites gebruik maken van een class

vBET
19-03-10, 02:07
Nice:) We definitief zullen controleren. Hoe dan ook - eerst moeten we heel wat werk met bewegende performance verbeteringen van vBET4.x tot vBET3.x die lijkt van groter belang op dit moment. Maar wees kalm - wij uw verzoek op TODO lijst:)

Snake
29-04-10, 23:19
Ik heb deze semi-werken, maar al mijn foto's hetzelfde zijn eerste vlag, in de sprite.

vBET
11-06-10, 01:22
Gedaan. Zal ondersteund worden in de volgende versie - voor alle plaatsen waar vlaggen worden gebruikt:)

Automatic Translations (Powered by Google, Microsoft®, Yandex, SDL Language Cloud, IBM Watson and Apertium):
AfrikaansAlbanianArabicBelarusianBulgarianCatalanChineseCroatianCzechDanishDutchEnglishEstonianFilipinoFinnishFrenchGalicianGermanGreekHaitian CreoleHebrewHindiHungarianIcelandicIndonesianIrishItalianJapaneseKoreanLatvianLithuanianMacedonianMalayMalteseNorwegianPersianPolishPortugueseRomanianRussianSerbianSlovakSlovenianSpanishSwahiliSwedishTaiwaneseThaiTurkishUkrainianVietnameseWelshYiddish
Translated to other languages thanks to vBET Translator 4.10.1