또 다른 이미지 사전로드 문제

Question

필요한 모든 이미지를 수동으로 미리로드하는 스크립트가 있습니다. 다음과 같이 보입니다.

<script type="text/javascript"> 
(new Image()).src = "/images/buttonpinkpressed.png"; 
(new Image()).src = "/images/smallbuttonpinkpressed.png"; 
</script> 

실제로 모든 버튼 유형 및 기타 요소에 대해 이러한 항목이 많이 있습니다. 최악의 상황은 프로젝트가 진행 중이고 새 버튼이 매일 추가되므로 잊어 버리기 쉽습니다.

이제 사용중인 모든 것을 미리로드하는 하나의 범용 스크립트를 사용하고 싶습니다.

문서의 모든 요소를 ​​jQuery와 같은 선택기 (예 : $ ('buttons')라고 함)로 열거하고 나면 가장 힘든 부분입니다. 요소의 클래스 및 '활성'클래스의 결과 (혼동하지 말아야합니다 : 활성 가상 클래스, 차이는 없어야 함).

예를 들어

, 버튼이 있습니다 :

<button type="button" class="small pink"><p>Menu</p></button> 

그리고 다음과 같은 CSS가 :

button.pink.large 
{ 
    background-image: url('buttonpinknormal.png'); 
} 
button.pink.large.active 
{ 
    background-image: url('buttonpinkpressed.png'); 
} 
button.pink.small 
{ 
    background-image: url('buttonpinksmallnormal.png'); 
} 
button.pink.small.active 
{ 
    background-image: url('buttonpinksmallpressed.png'); 
} 

이 버튼에 대한 사전로드 된 이미지가 작은 '이후, 마지막이어야한다, 분명히 '및'분홍색 '이 명시 적으로 정의되어 있고'활성 '은 우리가 찾고있는 것입니다 :

button.pink.small.active 
{ 
    background-image: url('buttonpinksmallpressed.png'); 
} 

그래서 qu estion은 스타일을 필터링하는 방법입니다.

감사합니다,

당신이 볼 수 있듯이

UPDATE, 처음에 버튼이없는 '활성'스타일이 없습니다. 터치 이벤트에 스크립트가 추가되었습니다 (Android Webkit은 실제 : 활성을 지원하지 않기 때문에). 그래서 이미지는 다른 스크립트에서 미리로드되어야합니다. 그리고 예, 클릭 할 때 활성 상태 이미지가 런타임에로드되는 것을 보았으므로 멋지게 보입니다.

Answer 1

스프라이트를 사용하고 background-position을 변경하면 브라우저가 1 요청 만하면되며 정상 상태가 표시되어야하므로 사전로드 할 필요가 없습니다. 그리고 상태 간 전환은 렌더링 된 이미지의 위치를 ​​다시 지정하기 때문에 빠르다. (별개의 이미지는 느리지 만 효율적이지 않다.)