Drapeaux de charge avec un sprite CSS

[tavenger5]

J'ai fait des expériences avec des sprites CSS récemment et constaté qu'il peut réduire significativement les appels du serveur. Avec eux, tous les drapeaux pourraient être chargés à la fois au lieu d'une après l'autre. Cela aurait pour effet d'éliminer 52 appels serveur. Malheureusement il n'y a aucune manière facile de convertir les drapeaux dans un sprite, depuis les balises img sont construites dynamiquement dans le code.

Il ya quelques infos ici: Création facile et utile Sprites CSS | Css Globe (http://cssglobe.com/post/3028/creating-easy-and-useful-css-sprites)

CSS Sprites générateur (http://csssprites.com/)

Désolé pour toutes les suggestions dernièrement:)

Edit - Je pense avoir trouvé une façon de le faire. Le nom du sprite vient à correspondre au nom du drapeau / langue. Certains d'édition de «vbenterprisetranslator_flag 'devrait fonctionner.

Donc, il devrait ressembler à ceci: (voir le changement dans 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]

Nous allons regarder de plus près sur cette idée:) A ce moment, nous avons à apprendre sur css sprite et ça peut vraiment améliorer la performance (mise en cache des navigateurs sont des images de toute façon). Demande la mise en examen:)

[tavenger5]

BTW, voici ce que j'ai juste utilisé pour mettre en œuvre (je n'utilise pas tous les 52 ans, mais les 13 les plus courantes)

Le changement de vbenterprisetranslator_flag ci-dessus (sprite peut être renommé quoi - j'ai utilisé «flags»)

Cette image:
http://files.cellphoneforums.net/images/flags.png

Ceci ajouté à 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]

Comme je comprends soulignant langue active ne fonctionnera plus?

Nous allons regarder de près sur ce point:)

[tavenger5]

langue active souligne encore - qui utilise un style où les sprites utiliser une classe

[vBET]

Nice:) Nous définitivement vais vérifier. Quoi qu'il en soit - d'abord, nous avons beaucoup de travail avec le déplacement des améliorations de performance à partir d'vBET4.x vBET3.x qui semble être plus important en ce moment. Mais soyez tranquille - nous avons à votre demande sur la liste TODO:)

[Snake]

J'ai cette demi-travail, mais toutes mes images sont sous le même drapeau d'abord, dans le sprite.

[vBET]

Terminé. Seront soutenus dans la prochaine version - pour tous les endroits où les drapeaux sont utilisés:)