j헤드 404인 경우 이미지를 숨기기 위해 이미지가 존재하는지 확인하는 쿼리

j헤드 404인 경우 이미지를 숨기기 위해 이미지가 존재하는지 확인하는 쿼리

php를 사용하여 db에서 100장의 사진 url을 가져와서 페이지에 표시하지만 일부 사진은 더 이상 존재하지 않을 수 있습니다.사진 URL이 실패하면(404) jquery를 사용하여 이미지를 숨기고 오류 사진을 표시하지 않습니다.이것은 제 코드인데 작동하지 않습니다.

html

<div id=test>
    <img src="http://test.com/test1.jpg" />
    <img src=" http://test.com/test2.jpg" />
    <img src="http://test.com/test3.jpg" />
</div>

농담의

var pic_list = jQuery("#test img");

pic_list.load(function () {
    var http = new XMLHttpRequest();
    http.open('HEAD', pic_list, false);
    http.send();
    if (http.status == 404) {
        pic_list.hide();
    } else {
        pic_list.show();
    }
});

사용할 수 있는 경우 여러 Ajax 요청을 보낼 필요가 없습니다.onerror사건의

관련 jQuery/Javascript를 확인하여 파손된 이미지 포스트를 대체합니다.

고객의 요구사항에 맞게 조정:

HTML:

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

JS:

function imgError(image){
    image.style.display = 'none';
}

피들

또는 jQuery를 사용한 경우:

function imgError(image){
    $(image).hide();
}

---

저는 보통 HTML에서 인라인 JS를 사용하지 않으며 핸들러를 사용하는 것도 고려했습니다.

$('#test img').error(function() {
    $(this).hide();
});

그러나 에러 이벤트가 발생한 후 핸들러 어태치가 실행되면 위의 내용은 작동하지 않으므로 첫 번째 해결책을 제안합니다.

의 두 번째 매개 변수open메서드는 HTML 요소의 배열이 아닌 URL입니다.

그래서 당신은 요소들을 반복하고, 그것들을 얻을 수 있습니다.src사용하여 속성을 지정하고 메서드에 전달합니다.

이미 로드된 이미지가 있으므로 각 이미지에 대해 다른 요청을 수행하는 대신 다른 질문에서 설명한 방법을 사용할 수 있습니다.사용자가 타사 도메인을 차단하고 있는지 확인

이미지의 높이/폭이 고정되어 있지 않으면 이미지가 존재하지 않음을 나타내는 작은 아이콘이 나타납니다.이미지 크기를 사용하여 이미지가 로드되었는지 여부를 확인할 수 있습니다.

언급URL : https://stackoverflow.com/questions/12994419/jquery-to-check-image-exists-if-head-404-than-hide-it