이미지가 src 위치에서 발견되지 않으면 이미지를 숨기고 싶습니까?

Question

jQuery('img').bind('error',function(){ 
      alert('hi'); 
     jQuery(this).hide(); 
     }); 
 

이 코드를 작성했지만 사용할 수없는 이미지는 숨기지 않고 여전히 교차 기호를 보여줍니다. 아무도 잘못 될 수있는 것을 지적 할 수는 없습니다. 나는 document.ready 아래에 이것을 쓰고 있는데 나는 window.onload 아래에서 그것을 시도했다.

Answer 1

문제는 오류 이벤트를 바인드 할 때 이미 이미지의 오류가 발발 한 것으로 보입니다. 이벤트를 바인딩 한 후 img.src를 재설정하여 다시 시작할 수 있습니다. 다음은 IE8, FF 및 Chrome에서 작동했습니다.

$('img').error(function(){ 
    alert('hi'); 
    $(this).hide(); 
}); 

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

jsFiddle은 여기에 있습니다 : http://jsfiddle.net/7cnQN/

Answer 2

jQuery(document).ready() 및 jQuery(window).onload() 모두 img에는 ​​이미 오류가 있으므로 오류가 너무 늦게 바인딩됩니다. 사용해보기 :

jQuery('img').live('error',function(){ 
      alert('hi'); 
     jQuery(this).hide(); 
     }); 

before jQuery (document) .ready();

아직이 코드를 사용해 본적이 없습니다. (시간이 너무 오래 걸리지 않을 것입니다.) 작동하는지 알려주십시오.

Answer 3

개인적으로 JQuery에 문제가 있습니다. JQuery는 JavaScript의 기본 기능을 연구하는 것을 중단시키는 것처럼 보입니다. .error() 문서가이 쇼에 (테스트하지)

myimage.onerror = function() { this.style.visibility = 'hidden'; }

Answer 4

예 :

$("img").error(function(){ 
    $(this).hide(); 
}); 

을 인 ... 개인적으로 의 OnError 이벤트 등을 사용 근본적으로 당신이하고있는 것과 같습니다. jQuery가로드되어 페이지에서 사용 가능한지 확인할 수 있습니까? 또한 FireFox, Chrome 또는 Safari를 사용하는 경우 자바 스크립트 콘솔에서 오류를 확인하십시오.

편집 : 문서에서,이 참고 :

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

로컬로 테스트 중이십니까?

Answer 5

당신은 다른 전술을 시도하고 대신 그들은로드 할 때 이미지를 표시 할 수 있습니다

jQuery('img').each(function(i,img){ 
    jQuery('img').bind('load',function(){ this.show(); }); 
    if (img.complete) 
     jQuery(img).show(); 
}); 

먼저 바인딩 이벤트에 다음 확인 이미지가 이미로드 된 경우 (완료) 표시하십시오. 이를 위해서는 스크립트로 또는 개별 이미지의 인라인 스타일 내에서 모든 이미지를 미리 숨겨야합니다. 범위로 알려진 컨테이너 사용 ...

jQuery('#container img') 

...이 동작을 이미지의 하위 집합으로 제한 할 수 있습니다.

Answer 6

경쟁 조건을 다룹니다. jQuery는 이미지가로드 될 때로드되었을 수도 있고로드되지 않을 수도 있습니다.다음 코드는 두 경우를 처리합니다.

$('img').each(function() { 
    var img = this; 
    if (img.complete) { 
     if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) { 
      console.log(img, 'load failed'); 
     } else { 
      console.log(img, 'load ok'); 
     } 
    } else { 
     $(img).error(function() { console.log(img, 'load failed - error()'); }); 
     $(img).ready(function() { console.log(img, 'load ok - onload()'); }); 
    } 
}); 

Answer 7

FF, IE, Chrome, Safari, Opera에서 테스트되었습니다.

$('img').each(function() { 
    var img = this; 
    if (img.complete) { 
     if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) { 
      console.log(img, 'load failed'); 
     } else { 
      console.log(img, 'load ok'); 
     } 
    } else if (img.readyState == 'uninitialized') { 
     console.log('load failed - IE'); 
    } else { 
     $(img).error(function() { console.log(img, 'load failed - error()'); }); 
     $(img).ready(function() { console.log(img, 'load ok - onload()'); }); 
    } 
});