Javascript/JQuery - 깨진 이미지에 대해 오류 기능을 재설정하려면 어떻게해야합니까? (두 번째 깨진 이미지 용)

Question

좋아, 나는 onError 자바 스크립트가 멋지게 작동하도록했다. 그러나 대부분의 경우 대체 이미지를 사용해 볼 필요가 있으며 손상된 경우 로컬 기본 이미지로 되돌려 야합니다.

초기 깨진 이미지 (http://somesite.com/someimage.jpg)에서이 코드는 전달 된 대체 이미지를 올바르게로드합니다. 그러나 코드에서 볼 수 있듯이 대체 이미지가 손상된 경우 로컬 기본 이미지 (/some/local/file.jpg)가로드되도록 source.onerror를 재설정하려고합니다. 그러나 defaultImage()는 호출되지 않습니다. 내가 이것을 source.onerror="alert('hi')";으로 바꾸면 어쨌든 결코 호출되지 않기 때문에 "this"를 전달할 문제가 아닙니다.

페이지가로드되면 오류가 한 번만 발생하고 다시는 시도하지 않는 것처럼 보입니다. DOM이 img를 다시로드하도록 강제 할 수있는 방법이 있습니까? 대체 이미지가 손상되면 새로운 onerror 함수가 시작됩니다.

<img src="http://somesite.com/someimage.jpg" onerror="AltImage(this, 'http://sommesite.com/otherimage.jpg');"/> 
<img src="http://somesite.com/someimage.jpg" onerror="AltImage(this, '');"/> 
<script> 
function AltImage(source, alt_image){ 
    if (alt_image !=""){ 
    source.src = alt_image; 
    source.onerror = "defaultImage(this)"; 
    return true; 
    } 
    source.src = "/some/local/file.jpg"; 
    source.onerror = ""; 
    return true; 
} 
function defaultImage(source) { 
    source.src = "/some/local/file.jpg"; 
    data.onerror=""; 
    return true; 
} 
</script> 

Answer 1

이미지가 기능을 사용하여 아래 대신에 당신의 방법으로 존재하거나하지 않을 경우 당신은 확인할 수 있습니다 내가 시도 할 것입니다 무엇

function ImgLoad(myobj,sSrc) 
{ 
    var oImg=new Image(); 
    oImg.src="http://mydomain.com/images/"+sSrc; 
    oImg.onload=function(){myobj.src=oImg.src} 
    oImg.onerror=function(){myobj.src="http://mydomain2.com/images/"+sSrc} 
} 

Answer 2

는 할 :

$(function() { 
    $('img.fallbackable').error(function() { 
     $(this).unbind('error'); 
     this.onerror = function() { 
      this.src = 'default.png'; 
     }; 
     this.src = $(this).data('altsrc'); 
    }) 
    .attr('src', function() { 
     return $(this).data('src'); 
    }); 
}); 

그리고 HTML에를 다음 행동으로 원하는 행동을 취해야하는 이미지를 정의하십시오.

<img data-src="someimage.jpg" data-altsrc="otherimage.jpg" class="fallbackable"> 

그래서 이미지는 즉시로드되는 것이 아니라 DOM이 준비되고 이러한 모든 이미지 객체에 onerror 핸들러가 첨부 된 경우에만로드가 시작됩니다. 따라서 우리는 모든 이미지 (클래스 fallbackable으로 표시된)에 대해 필요한 경우 실행될 오류 처리기가 있는지 확인합니다.