Beban bendera dengan sprite css

[tavenger5]

Saya telah bereksperimen dengan css sprite akhir-akhir ini dan menemukan bahwa hal itu dapat mengurangi memanggil server secara signifikan. Dengan mereka semua bendera bisa dimuat sekaligus, bukan satu demi satu. Ini secara efektif akan menghilangkan 52 memanggil server. Sayangnya tidak ada cara mudah untuk mengubah bendera ke sprite karena tag img dibangun secara dinamis dalam kode.

Ada beberapa info di sini: Membuat mudah dan berguna Sprite CSS | Css Globe (http://cssglobe.com/post/3028/creating-easy-and-useful-css-sprites)

CSS Sprite Generator (http://csssprites.com/)

Maaf untuk semua saran akhir-akhir ini:)

Edit - Saya rasa saya menemukan cara untuk melakukannya. Nama sprite hanya harus sesuai dengan nama bendera / bahasa. Beberapa pengeditan 'vbenterprisetranslator_flag' harus bekerja.

Jadi akan terlihat seperti ini: (lihat perubahan 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]

Kita akan melihat lebih dekat pada ide ini:) Pada saat ini kita harus belajar tentang css sprite dan apakah hal itu benar-benar dapat meningkatkan kinerja (browser cache gambar saja). Permintaan dimasukkan ke dalam pertimbangan:)

[tavenger5]

btw, di sini adalah apa yang saya hanya digunakan untuk mengimplementasikan itu (saya tidak menggunakan semua 52, tetapi 13 yang paling umum)

Perubahan untuk vbenterprisetranslator_flag atas (sprite dapat diganti apa pun - saya menggunakan 'bendera')

Gambar ini:
http://files.cellphoneforums.net/images/flags.png

Hal ini menambah 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]

Seperti yang saya mengerti menyoroti bahasa aktif tidak akan bekerja lagi?

Kita akan melihat dari dekat pada bahwa:)

[tavenger5]

bahasa aktif masih menyoroti - yang menggunakan gaya mana sprite menggunakan kelas

[vBET]

Nice:) Kita pasti akan memeriksa hal itu. Pokoknya - pertama kita memiliki banyak bekerja dengan bergerak perbaikan kinerja dari vBET4.x untuk vBET3.x yang tampaknya lebih penting sekarang. Tapi tenang - kami memiliki permintaan Anda pada daftar TODO:)

[Snake]

Aku punya semi-bekerja, tapi semua gambar-gambar saya adalah bendera pertama yang sama, dalam sprite.

[vBET]

Selesai. Akan didukung dalam rilis berikutnya - untuk semua tempat di mana bendera yang digunakan:)