JavaScript, jQuery : 이미지 로딩 오류 처리 방법 : 예제, 구현

JavaScript, jQuery : 이미지 로딩 오류 처리 방법 : 예제, 구현

 

브라우저에서 이미지를 올바르게 로드 할 수 없는 경우 사용중인 브라우저에 따라 여러 가지 작업을 수행합니다. 물음표 이미지 또는 아무것도 표시되지 않습니다. 이미지를 찾을 수 없으면 브라우저에서 오류가 발생하며 jQuery를 사용하여 이러한 오류를 찾아 사용할 수 있습니다.

이미지에 이벤트 핸들러를 추가하여 오류가 있는지 확인하고 오류를 반환하면 jQuery가 무언가를 수행하도록 할 수 있습니다. 예를 들어 이미지를 찾을 수 없는 경우 이미지를 누락된 이미지 그림으로 변경하거나 jQuery에서 이미지 상자를 숨길 수 있습니다. 다음은 jQuery 상자를 숨기거나 이미지를 다른 것으로 변경하는 작은 스니펫입니다.

 

// Hide the image on error
$("img").error(function(){
        $(this).hide();
});

// Change the image to a missing image
$('img').error(function(){
        $(this).attr('src', 'no-image.jpg');
});

 

 

IE8 및 하위 버그

위의 기술은 타이밍 문제로 인해 IE8에 작동하지 않으므로 document.ready 함수에 다음 줄을 추가해야합니다.

$('img').each(function(){
     $(this).attr('src', $(this).attr('src'));
});

 

이는 페이지 로드시 이미지 소스를 자체로 설정한 다음 오류 이벤트를 시작합니다. 그러나 이것은 페이지 로딩 시간을 느리게 하므로 IE8 이하에서만 이 작업을 수행합니다.

if ( $.browser.msie && $.browser.version < 9 ) {
$('img').each(function(){
     $(this).attr('src', $(this).attr('src'));
});
}