자동 DD 지연 png 스크립트

Question

나는 잠시 동안 http://www.dillerdesign.com/experiment/DD_belatedPNG/을 사용 해왔고 IE6 png의 두통 대부분을 해결했습니다.

클래스를 자동화하여 JSN 파일에 배경 이미지를 사용하여 html 요소의 ID를 추가하지 않도록 자동화하는 방법이 있는지 궁금합니다. - IE6의 속도가 느려지는 것에 대해서는별로 신경 쓰지 않습니다. 클라이언트에게 웹 사이트가 브라우저 때문에 느리다는 것을 설명하는 것이 모든 것이 회색 배경을 가지고있는 이유를 설명하는 것보다 쉽습니다!

저는 JS 전문가가 아니지만 src 속성을 잡고 클래스에 파일 이름을 추가하는 것이 어렵지 않다고 생각합니다. - 어쨌든 CSS를 구문 분석하고 포함하는 요소의 ID를 추가하는 것이 불가능하지 않으면 어렵게 들립니다. ??

Answer 1

이것은 테스트되지 않았지만 여기서는 작동해야하는 jQuery 솔루션이 있습니다. 기본적으로 .png 확장자에 대한 모든 img 요소를 확인한 다음 img를 제외한 모든 요소를 ​​검사하여 .png 확장자가있는 배경 이미지를 찾습니다.

CSS 배경 속성과 배경 이미지를 확인하려면 추가 코드를 추가해야 할 수도 있습니다 . body * selector를 사용하면 많은 요소를 가진 페이지에 많은 오버 헤드가 있다고 상상할 수 있습니다. 그러나 나는 당신과 함께합니다. IE6 사용자가 브라우저를 업데이트하는 데 신경 쓰지 않으면 IE6 사용자가 페이지를로드하는데 얼마나 오래 걸릴지는 신경 쓰지 않습니다.

$(function() { 
    $('img').each(function() { 
      if(this.src.split('.').pop() == 'png') { 
        DD_belatedPNG.fixPng(this) 
      } 
    }); 
    $('body *:not(img)').each(function() { 
      if($(this).css('background-image').split('.').pop().replace(/("|\')\)/,'') == 'png') { 
        DD_belatedPNG.fixPng(this); 
      } 
    }); 
}); 

EDIT :이 점은 상당히 흥미로운 과제이므로 순수한 JavaScript 솔루션을 작성했습니다. DOM이 준비되었을 때 실행해야하므로 DOM 준비 함수가있는 jQuery 나 다른 프레임 워크를 사용하지 않으려면 다음과 같이 Dean Edwards 메소드를 사용해야합니다.