페이지에 모든 CSS 스프라이트 클래스 포함하기

Question

FamFamFam 실크 아이콘 세트를 스프라이트로 만들고 모든 아이콘을 HTML 페이지에 표시하려고합니다. 문제는 1000 개의 아이콘이 2 개의 .png 이미지로 나뉘며 각각의 이미지는 자체 클래스로 구성된다는 것입니다. 예를 들어 첫 번째 아이콘은 class="silk1 ad-accept"이고 두 번째 .png 이미지의 마지막 아이콘은 class="silk2 ad-zoom-in"입니다. 어쨌든, 시간과 가능한 실수는 말할 것도없고 손으로 직접하려고 노력하는 것은 미친 일입니다.

제 질문은 jQuery를 사용하여 자동으로 수행 할 수 있습니까? 기본적으로 각 CSS 스프라이트 클래스를 가져 와서 li과 같은 요소에 적용하는 스크립트가 필요합니다. 사용 된 클래스에 제목을 적용하면 매우 유용 할 것이므로 어떤 아이콘인지 알 수 있습니다.

Answer 1

jQuery의 addClass 메소드를 사용하여 원하는 요소 집합에 클래스를 추가 할 수 있습니다.

$(function(){ 
    $(#ads li).addClass('silk1 ad-accept'); 
}); 

그런데 실제로 사이트 전체에서 1000 개의 아이콘을 사용하고 있습니까? 귀하의 모든 사용이 소수의 아이콘 일 경우 이는 상당한 오버 헤드와 같습니다. 이론적으로 요청 수가 적기 때문에 스프라이트가 더 잘 수행되지만 800kb 스프라이트에 대한 요청보다 8kb 아이콘에 대한 요청이 5 개 훨씬 빠릅니다. 고려해야 할 것이 있습니다 ...

Answer 2

이것은 당신이하는 일입니까?

for (var i = 0; i < document.styleSheets.length; i++) { 
    var styleSheet = document.styleSheets[i]; 
    for (var j = 0; j < styleSheet.cssRules.length; j++) { 
     var rule = styleSheet.cssRules[j]; 
     if (/^\.silk\d+\./.test(rule.selectorText)) { 
      var classNameParts = /\.(silk\d+)\.(.*)$/.exec(rule.selectorText); 
      var element = document.createElement('DIV'); 
      element.className = classNameParts[1] + ' ' + classNameParts[2]; 
      element.appendChild(document.createTextNode(element.className)); 
      document.body.appendChild(element); 
     } 
    } 
}​ 

예 : http://jsfiddle.net/ddAcY/