掌上电脑

查看完整版本: 已经完成 使用CSS精灵负载标志



tavenger5
17-03-10, 16:54
我一直在尝试与CSS精灵最近发现,它可以减少服务器上调用显着下降。他们所有的标志可以加载一次,而不是一个又一个。这将有效地消除52个服务器调用。不幸的是,有没有简单的方法将其转换成一个精灵的标志,因为img标签在代码中动态建。

这里有一些信息:创建简单和有用的CSS精灵| CSS仪(http://cssglobe.com/post/3028/creating-easy-and-useful-css-sprites)

CSS精灵发电机(http://csssprites.com/)

对不起,所有最近建议:)

编辑 - 我想我发现了一个办法做到这一点。精灵的名称,标志/语言的名称相对应。一些“vbenterprisetranslator_flag”的编辑工作。

因此,它会是这个样子:(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
我们将看看这个想法接近:),在这个时刻,我们必须了解CSS精灵,是否真的可以提高性能(浏览器缓存图像反正)。要求考虑:)

tavenger5
17-03-10, 20:57
顺便说一句,我只是用来实现(我不使用所有52个,但13最常见的)

vbenterprisetranslator_flag改变上述(精灵可以重新命名任何 - 我用“标志”)

此图片:
http://files.cellphoneforums.net/images/flags.png

这增加了额外的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
据我所知突出积极的语言将不再工作了吗?

我们将会看到,接近:)

tavenger5
17-03-10, 22:13
积极的语言仍然突出 - 使用精灵使用类的一个风格

vBET
19-03-10, 02:07
尼斯:)我们明确地将检查。无论如何 - 首先,我们必须从vBET4.x vBET3.x似乎现在更重要的移动性能改进了很多工作。但平静 - 我们有你的TODO列表上的要求:)

Snake
29-04-10, 23:19
我有这个半的工作,但我所有的图像都是相同的的第一个标志,在sprite。

vBET
11-06-10, 01:22
完成。将在下一版本的支持 - 为标志用于所有的地方:)

Automatic Translations (Powered by Google, Microsoft®, Yandex, SDL Language Cloud, IBM Watson and Apertium):
AfrikaansAlbanianArabicBelarusianBulgarianCatalanChineseCroatianCzechDanishDutchEnglishEstonianFilipinoFinnishFrenchGalicianGermanGreekHaitian CreoleHebrewHindiHungarianIcelandicIndonesianIrishItalianJapaneseKoreanLatvianLithuanianMacedonianMalayMalteseNorwegianPersianPolishPortugueseRomanianRussianSerbianSlovakSlovenianSpanishSwahiliSwedishTaiwaneseThaiTurkishUkrainianVietnameseWelshYiddish
Integration with translations by vBET Translator 4.10.1