IE에서 작동하지만 FF가 아닌 이미지 교환 (JS/JQuery)

Question

깨진 이미지 (둘 다 JS & jQuery)를 교체하기 위해 여러 가지 솔루션을 시도했지만 IE에서는 완벽하게 작동하지만 FF에는 그렇지 않습니다.

이미지가 FF로 다르게 처리됩니까?

JQuery와 예 :

$("img").error(function(){ 
    $(this).unbind("error").attr("src", "nopic.jpg"); 
}); 

자바 스크립트 예 :

function noimage(img){ 
    img.onerror=""; 
    img.src="nopic.jpg"; 
    return true; } 

이러한 예는 모두 IE에서 완벽하게 작동하지만, 전혀 FF에서 (img 태그에서의 OnError 이벤트에 의해 트리거). 뭐라 구요?

미리 감사드립니다.

Answer 1

당신은 파일 URL에 지정하여, 당신이 아닌, 로컬로 테스트하고?

로컬 서버 일지라도 실제 서버에서 테스트 해보십시오. 나는 파이어 폭스가 HTTP 상태 코드가 이미지에서 반환되어 오류를 유발한다고 믿는다. file : // ... URL에서로드하는 경우 서버가 관련되어 있지 않으므로 오류가 발생하지 않습니다. jQuery API docs for error()에서

:

이 이벤트는 제대로 페이지가 로컬로 제공하는 경우 해고 할 수 없습니다. 오류는 일반적인 HTTP 상태 코드에 의존하기 때문에 URL이 file : 프로토콜을 사용하면 일반적으로 트리거되지 않습니다.

는

편집 : 우리는 코멘트에서 논의했듯이,이의 소리로, 인트라넷 서버가 404 누락 된 자원에 응답하지 않습니다 어떤 이유로 (또는 다른 에러 때문에 것으로 보인다)

Firefox는 오류를받지 않기 때문에 오류 처리기를 트리거하지 않으므로 정상적인 동작처럼 보입니다.

당신의 문제는 방금 "내 서버가 누락 된 콘텐츠에 대해 404 오류를 반환하지 않습니다"라고 생각합니다. 그러나 요청하기 전에 증거를 수집하기 위해 좀 더 실험해야 할 수도 있습니다. SO ...)

Answer 2

error 처리기를 먼저 바인딩해야합니다. 전에 이미지의 src를 설정하십시오. 그래서 HTML로 src를 설정하고 자바 스크립트를 통해 바인딩하면 작동하지 않습니다.

직접 증명할 수 있습니다 : http://jsfiddle.net/4Wcnj/2/.

HTML :

<img width=500 id=img height=500 src="missing1"> 

자바 스크립트 :

// At this point, missing1 is having an error, but no handler set so far 

$("#img").error(function() { 
    alert("Missing: " + $(this).attr("src")); 
}); 

// The bind handler has been set, now if you set the src wrongly, you 
// get the alert 
$("img").attr("src", "missing2");