jQuery: 이미지가 존재하는지 확인합니다.

jQuery: 이미지가 존재하는지 확인합니다.

jQuery $.ajax를 통해 이미지 경로를 로드하고 있으며 이미지를 표시하기 전에 실제로 존재하는지 확인하고 싶습니다.이미지 로드/준비 이벤트 또는 이와 유사한 이벤트를 사용하여 파일 경로가 유효한지 확인할 수 있습니까?

.내 이미지가 표시되도록 설정됨: 없음, 나는 다음과 같은 것을 하기를 희망합니다.

$(".myimage").attr("src", imagePath);
$(".myimage").load(function() {
    $(this).show();
});

그것과 같은 것이 가능합니까?

핸들러를 묶을 수 있습니다

업데이트: InjQuery 3.0 이상:

$(".myimage").on("error", function() {
    $(this).hide();
});

참고: jQuery 1.8에서는 더 이상 사용되지 않으며 3.0에서는 제거되었지만 이전 버전에서는 다음과 같은 기능을 사용할 수 있습니다.

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

음, 당신의 것은 이미 로드 이벤트로 괜찮습니다.

$(".myimage").load(function() {
    $(this).show();
});

문제는 Javascript가 비활성화된 경우 이미지에...이 표시되지 않는다는 것입니다.

시도:

function urlExists(testUrl) {
 var http = jQuery.ajax({
    type:"HEAD",
    url: testUrl,
    async: false
  })
  return http.status;
      // this will return 200 on success, and 0 or negative value on error
}

그 다음에 사용

if(urlExists('urlToImgOrAnything') == 200) {
    // success
}
else {
    // error
}

오래된 스레드를 알고 있지만 개선될 수 있을 것 같습니다.OP에 간헐적인 문제가 있는 것을 발견했는데, 이는 이미지 로드와 오류 확인이 동시에 발생할 수 있습니다.먼저 이미지를 로드한 다음 오류를 확인하는 것이 좋습니다.

$(".myimage").attr("src", imagePath).error(function() {
    // do something
});

당신이 이미 AJAX 요청을 하고 있기 때문에, 저는 이것을 당신의 AJAX를 지원하는 서버 측 앱으로 오프로드하겠습니다.서버에서 파일이 있는지 확인하는 것은 간단한 일이며, 결과를 지정하기 위해 다시 보내는 데이터에 변수를 설정할 수 있습니다.

이 질문은 몇 년 전의 질문이지만, 여기 오류 처리기의 더 나은 사용 예가 있습니다.

$("img")
  .error(function(){
    $(this).hide();
  })
  .attr("src", "image.png");

이벤트를 탐지하려면 이미지를 로드하기 전에 오류 처리기를 연결해야 합니다.

출처: http://api.jquery.com/error/

제가 한 일은 이렇습니다.

$.get( 'url/image', function(res){ 
    //Sometimes has a redirect to not found url
    //Or just detect first the content result and get the a keyword for 'indexof'
    if ( res.indexOf( 'DOCTYPE' ) !== -1 )  {
        //not exists
    } else {
        //exists
    }
});

언급URL : https://stackoverflow.com/questions/3327655/jquery-check-if-image-exists