깨진 이미지를 대체하는 jQuery / JavaScript 와서 깨진 이미지로

여러 이미지가 포함 된 웹 페이지가 있습니다. 때로는 이미지를 사용할 수 없으므로 클라이언트 브라우저에 깨진 이미지가 표시됩니다.

jQuery를 사용하여 이미지 세트를 가져 와서 깨진 이미지로 필터링 한 다음 src를 바꾸려면 어떻게합니까?

–jQuery로이 작업을 수행하는 것이 더 쉬울 것이라고 생각했지만 순수한 JavaScript 솔루션, 즉 Prestaul에서 제공하는 솔루션을 사용하는 것이 훨씬 더 쉽다는 것이 밝혀졌습니다.

답변

onErrorJavaScript를 사용하여 이미지가 소스를 다시 할당 하도록 이벤트를 처리하십시오 .

function imgError(image) {
    image.onerror = "";
    image.src = "/images/noimage.gif";
    return true;
}

<img src="image.png" onerror="imgError(this);"/>

또는 JavaScript 함수가없는 경우 :

<img src="image.png" onError="this.onerror=null;this.src='/images/noimage.gif';" />

다음 호환성 표는 오류 기능을 지원하는 브라우저를 보여줍니다.

http://www.quirksmode.org/dom/events/error.html

답변

나는 내장 사용하십시오 error핸들러 :

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

편집 : 이 error()방법은 jquery 1.8 이상에서 더 이상 사용되지 않습니다 . 대신 사용해야하는 .on("error")대신 :

$("img").on("error", function () {
    $(this).attr("src", "broken.gif");
});

답변

나 같은 경우 사람의 연결을 시도에서 error동적 HTML을의에 이벤트 img태그를, 나는 캐치가 있음을 지적하고 싶습니다 :

명백히 img오류 이벤트 는 표준에서 말하는 것과 달리 대부분의 브라우저에서 버블 링되지 않습니다 .

따라서 다음과 같은 것이 작동하지 않습니다 .

$(document).on('error', 'img', function () { ... })

이것이 다른 사람에게 도움이되기를 바랍니다. 이 스레드에서 이것을 보았 으면 좋겠습니다. 그러나 나는하지 않았다. 그래서 나는 그것을 추가하고 있습니다

답변

독립형 솔루션은 다음과 같습니다.

$(window).load(function() {
  $('img').each(function() {
    if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
      // image was broken, replace with your new image
      this.src = 'http://www.tranism.com/weblog/images/broken_ipod.gif';
    }
  });
});

답변

나는 이것이 당신이 추구 하는 것이라고 믿습니다 : jQuery.Preload

데모의 예제 코드는 다음과 같습니다. 로딩 및 찾을 수없는 이미지를 지정하면 모든 설정이 완료됩니다.

$('#images img').preload({
    placeholder:'placeholder.jpg',
    notFound:'notfound.jpg'
});

답변

$(window).bind('load', function() {
$('img').each(function() {
    if((typeof this.naturalWidth != "undefined" &&
        this.naturalWidth == 0 )
        || this.readyState == 'uninitialized' ) {
        $(this).attr('src', 'missing.jpg');
    }
}); })

출처 : http://www.developria.com/2009/03/jquery-quickie—broken-images.html

답변

OP가 SRC를 대체하려고 시도하는 동안이 질문에 부딪힌 많은 사람들이 깨진 이미지를 숨기고 싶을 것입니다. 이 경우이 간단한 솔루션이 저에게 효과적이었습니다.

인라인 JavaScript 사용 :

<img src="img.jpg" onerror="this.style.display='none';" />

스 니펫 확장

외부 자바 스크립트 사용 :

var images = document.querySelectorAll('img');

for (var i = 0; i < images.length; i++) {
  images[i].onerror = function() {
    this.style.display='none';
  }
}
<img src='img.jpg' />

스 니펫 확장

최신 외부 JavaScript 사용 :

document.querySelectorAll('img').forEach((img) => {
  img.onerror = function() {
    this.style.display = 'none';
  }
});
<img src='img.jpg' />

스 니펫 확장

NoteList.forEach 및 화살표 기능에 대한 브라우저 지원을 참조하십시오 .