내 경우에 이미지 파일이 있는지 감지하는 방법은 무엇입니까?

Question

나는 다음과 같은

나는 동적으로 한 번에 한 이미지를로드 할

image1.png 
image2.png 
image3.png 
image4.png 
… 
… 
image20.png 



secondImg1.png 
secondImg2.png 
secondImg3.png 
secondImg4.png 
secondImg5.png 
……. 
…….. 
secondImg18.png 

같은 일련의 이미지를 가지고있다.

내 JS

var index = 1; 
var timer = setInterval(function(){playAnime()},200); 

function playAnime(){ 
    $('#holder').attr('src','image/image' + index + 'png') 
    index++ 
} 

내 코드

어떻게 작동하는지의 일반적인 생각을 보여하지만 애니메이션을 중지 20, 18에 인덱스를 중지하는 방법을 모르겠습니다. 기본적으로

을 (나는 그것이 20 또는 18인지 확인 if 문을 사용할 수 있지만, 내가 더 좋은 방법이 있다고 생각), 내가 거기 그런 파일이 없거나 이미지가 파손되기 때문에 만약 내 응용 프로그램로드 image21.png and secondImg19.png을 감지하고 중지하려면 . 이게 가능합니까? 도와 주셔서 감사합니다!

Answer 1

당신은 오류 이벤트가 문서에 의해 참조 및 브라우저에 의해로드 된 이미지와 같은 요소로 전송됩니다 Docs

에서 .error() 이벤트 핸들러

$('#holder').attr('src', 'image/image' + index + 'png').error(function() { 
    //Image does not exists do something 
}); 

를 사용할 수 있습니다. 요소가 올바르게로드되지 않은 경우 호출됩니다.