Javascript Check Image Source

Question

나는 소스가 존재하지 않으면 기본적으로 이미지를로드하려고 시도하면서 100 % 성공하지 못하도록 노력했습니다. 기본 이미지에 도달 할 때까지 두 번째 이미지를 시도합니다.

저는 this question을 기반으로 솔루션을 시도했지만 jQuery를 사용하지 않았습니다. 따라서 허용 된 솔루션은 제게는 쓸모가 없으므로 제 2의 솔루션을 시도해보십시오. 그게 의미가 있다면?). 우리가 필요로하는 두 번째 이미지를 테스트 할 수는 있지만, onload 이벤트를 다시 트리거하지 않는 것 같습니다.

function topTenImages(){ 
var topTenDiv = document.getElementById('toptenimg'); 
var topTenImg = new Image(); 
var ac = "tryout"; 
var imageOrder = new Array(
    "/images/codespec/banners/"+ac+"_topten.gif", 
    "/images/codespec/banners/"+ac+"_topten.jpg", 
    "/images/banners/default_topten.png", 
    "/images/banners/default_topten.jpg" 
); 
var errorCnt = 0; 
topTenImg.src = domainResources+imageOrder[errorCnt]; 
topTenImg.onLoad = new function(){ 
    if(!checkImage(topTenImg)){ 
    if(errorCnt < imageOrder.length){ 
    var io = imageOrder[++errorCnt]; 
    topTenImg.src = domainResources+io; 
    } 
    } 
} 
topTenDiv.appendChild(topTenImg); 
} 

예 나는 우리가 등 PHP/펄 /이 서버 측을 할 수 있다는 것을 알고 있지만, 우리는 우리의 나가는 헤더를 제한하기 위해 노력하고있다, 그래서 이것은 그 일을하는 가장 좋은 방법이 될 것 같았다. (대안 환영). 내 다른 생각은 for 루프에서 배열에 래핑하고 매번 새로운 개체를 만드는 것입니다. 그러나 이것은 더 합리적인 것처럼 보였다.

감사합니다, 싸이

Answer 1

이 귀하의 질문에 대답한다 : 당신은 그냥 처음에 onLoad를 설정해야 http://www.thefutureoftheweb.com/blog/image-onload-isnt-being-called 합니다. 다행히 그게 효과가 있기를 바랍니다 :

topTenImg.onLoad = function(){ 
    if(!checkImage(topTenImg)){ 
    if(errorCnt < imageOrder.length){ 
    var io = imageOrder[++errorCnt]; 
    topTenImg.src = domainResources+io; 
    } 
    } 
} 
topTenImg.src = domainResources+imageOrder[errorCnt];