CSS 스프 라이트와 함께로드 플래그

[tavenger5]

요즘 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]

우리는이 아이디어에 자세히 표시됩니다) 이때 우리는 CSS 스프 라이트에 대해 배워야만 그것이 정말 (브라우저가 어쨌든 이미지 캐싱됩니다) 성능을 향상시킬 수 없습니다. 요청 고려하다 :)

[tavenger5]

BTW, 여기서 난 단지 그것을 구현하는 데 사용되는 무엇입니까 (내가 다 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]

제가 사용중인 언어를 강조 이해로 더 이상 작동하지 않습니다?

우리는 거기에 가까운 모습 :)

[tavenger5]

사용중인 언어는 여전히 하이라이트 - 스프 라이트는 클래스를 사용하여 어디에 스타일을 사용하는

[vBET]

좋은 :) 우리는 definitively 그것을 확인합니다. 어쨌든 - 우리가 처음 vBET4.x에서 지금 더 중요 보인다 vBET3.x 성능 향상을 움직이는 일이 많이 있습니다. 그러나 진정 - 우리가 TODO리스트에 귀하의 요청을 :)

[Snake]

나는이 세미 작동 있지만 모든 이미지는 스프 라이트에 동일한 첫번째 플래그입니다.

[vBET]

완료. 다음 릴리스에서 지원됩니다 - 플래그를 사용하는 모든 장소에 대해 :)