이미지 교체를 위한 새로운 기술: 상태 도메인 메소드_자바스크립트 기술

Dave Shea의 훌륭한 요약, Paul Young을 참조하여 기존 방법의 장단점을 모두 분석한 후 새로운 방법을 제안하고 이를 "상태 도메인 방법"(The StateMethod)이라고 명명했습니다. 기사에서는 이 방법의 원리를 자세히 소개합니다.

이 방법은 서버에 이미지를 요청하는 대신 이미지가 비활성화되어 있는지 확인합니다. 그렇게 하면 추가 http 요청이 발생하기 때문입니다. 저자는 독창적인 접근 방식을 만들었습니다.

대부분의 브라우저에서 이미지 개체는 인스턴스화되고 잘못된 URL(http://0)로 다시 추적될 수 있으므로 이미지 상태를 쉽게 감지할 수 있습니다. 비활성화하면 onerror 이벤트가 발생하고 js 파일 시작 부분에 새 이미지 객체가 생성됩니다.

<font face="NSimsun">var img = new Image();</font>

그런데 이 방법과 호환되지 않는 이상한 브라우저가 두 개 있습니다. Gecko 브라우저에서는 이미지 비활성화 여부에 관계없이. Onerror 이벤트가 항상 트리거됩니다. 다행히도 이 문제를 해결할 수 있는 또 다른 실행 가능한 솔루션이 있습니다. 잘못된 배경 이미지를 html 요소에 첨부한 다음 getCompulatedStyle 메소드를 통해 스타일 속성을 얻는 것입니다. 이미지가 비활성화된 경우 해당 속성은 none 또는 url(invalid-url:):

입니다.

if (img.style.MozBinding != null)
{
img.style.BackgroundImage = "url(" document.location.protocol "//0)"
var bg = window .getCompulatedStyle(img,'').BackgroundImage;

if (bg != "none" && bg !="url(invalid-url:)" || document.URL.substr(0, 2) == "fi")
{
document.enableStateScope("images-on", true)
}
}<font face="NSimsun"> </font>

또 다른 까다로운 브라우저는 Safari입니다. 요청이 잘못된 URL인 경우 Safari의 상태 표시줄에 오류 메시지가 표시되지만 페이지 레이아웃은 어떤 식으로든 영향을 받지 않습니다. 사용자의 상태 표시줄이 켜져 있으면 오류가 계속 발생하는데 이는 매우 비전문적입니다. 마찬가지로 저자는 또 다른 가능한 해결 방법을 연구했습니다. 이미지가 1*1 gif 이미지에서 제공되고 데이터로 인코딩된 경우. 이미지가 비활성화된 경우 Safari에서 테스트한 대로 너비는 0이 됩니다.

else
{
img.style.cssText ="-webkit-opacity:0"
if (img.style.webkitOpacity == 0)
{
img.onload = function()
{
document.enableStateScope("images-on", img.width > 0)
}
img.src =
"data:image/gif; base64,"
"R0lGODlhAQABAIAAAP///wAAACH5BAE"
"AAAAALAAAAAABAAEAAAICREAAOw==";
}
}<font face="NSimsun"> </font>

마지막으로 다른 브라우저의 경우 Image 개체 초기화를 시작할 때 onerror 트리거 이벤트만 테스트하면 됩니다.

   else
   {
     img.onerror = function(e)
     {
      document.enableStateScope("images-on", true);
     }
     img.src = "about:blank";
   }

상태 필드 전환 가능

사용자가 텍스트와 대체 이미지 간에 전환할 수 있는 시스템을 만드는 것이 가능합니다.

예제 보기(Paul Young 제공 예시 파일)

본문이나 기타 하위 요소 대신 클래스 속성이 html에 추가되는 이유는 이미지를 교체하기 전에 본문을 완전히 로드해야 하기 때문입니다. html 위에 "image-on"이 추가되지 않은 경우. 상태 필드가 활성화되면 깜박임이 발생합니다.

이미지 교체 기술은 CSS에서 매우 중요한 부분입니다. 저자는 기존 이미지 교체 기술의 단점을 고려하여 새로운 접근 방식을 찾기 위해 많은 시간을 투자했습니다. 이 방법은 독특하고 배울 가치가 있습니다.

샘플 다운로드: tate-scope-image-replacement.zip

원문번역: http://www.denisdeng.com/?p=235

영문 원문: http://www.sitepoint.com/article/image-replacement-state-scope/