jQuery 재귀 적 이미지로드 및 IE

Question

이미지 묶음을 재귀 적으로로드하려고하는데 13 번의 재귀 제한 때문에 god-forsaken IE를 제외한 모든 브라우저에서 완벽하게 작동합니다.

이제이 문제를 직접 해결할 수 있습니다.하지만 jQuery를 배우는 중이므로 "우수 사례"를 따르고 싶습니다. 그리고 저는 여기 주변의 지도자가 도움이 될만한 포인터를 줄 수 있다고 생각합니다. 어떻게 고칠 것을 제안 하시겠습니까?

내 코드 :

 
$(document).ready(function(){ 
    loadThumbs(["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg", 
       "9.jpg","10.jpg","11.jpg","12.jpg","13.jpg","14.jpg","15.jpg", 
       "16.jpg","17.jpg","18.jpg","19.jpg","20.jpg"], 0); 
}); 
function loadThumbs(files, index){ 
    if(index == files.length) return; 
    var file = files[index]; 
    var image = new Image(); 
    $(image) 
     .load(function(){ 
      $("#container").append(image); 
      loadThumbs(files, index+1); 
     }) 
     .addClass("thumb") 
     .attr("src", file); 
}

이 당신이 스택 오버플로 오류가 발생합니다 (내 경우 8) IE에서 시도하십시오.

감사합니다.

Answer 1

이미지를 하나씩 로딩하는 것이 더 깔끔해 보이기 때문에 이미지를 병렬로 로딩하는 것으로 가정합니다.

Before: 
loadThumbs(files, index+1); 

After: 
var nextIndex = index + 1; 
setTimeout(function() { loadThumbs(files, nextIndex) }, 0) 

을 그리고 네, 함수의 상단에 배열 경계에 대한 검사를 추가합니다 : 약간의 재 작성이 스택 오버 플로우 문제를 해결해야 if (!files[index]) return;, 나는 그 이유 내기 왜 IE8의 코드 휴식.

Answer 2

저는 파이어 폭스와 IE 8에서 그것을 시도했지만 실패하고 있습니다. 추가 기능이 없어도 IE 8에서 사용해 보았습니다. 코드 의견 중 하나로서

function loadThumbs(files, index){ 
var file = files[index]; 
var image = new Image(); 
$(image) 
.load(function(){ 
$("#container").append(image); 
loadThumbs(files, index+1); 
}) 
.addClass("thumb") 
.attr("src", file) 
} 

에서

전혀, 왜 사용 재귀를 물어? 다음을 시도하십시오 (구문 오류를 용언하십시오).

function loadThumbs(files){ 
for (index=0;index<files.length;i++) 
{ 
    var file = files[index]; 
    var image = new Image(); 
    $(image).load(function(){ 
    $("#container").append(image); 
    loadThumbs(files, index+1); 
    }).addClass("thumb").attr("src", file); 
} 
} 

은 아마도 귀하의 경우에는 무슨 일이 일어나고 있는지 인덱스 (배열의 경계에서) 20에 도달하면, 당신은 당신의 파일 변수에 대한 정의되지 않은를 얻을 것입니다. 이것은 브라우저를 크래시하지 않고 var 타입을 가지고 있기 때문에 정의되지 않은 변수를 전달할 것입니다. IE 8에서는 정상적으로 종료하지 않고 인덱스를 1 씩 증가시킵니다.

다른 옵션은 재귀 적 방법에 체크를 넣는 것입니다. 파이어 폭스가 20 파일 이름을 표시

$(document).ready(function() { 
     loadThumbs(["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg", "10.jpg","11.jpg", "12.jpg", "13.jpg", "14.jpg", "15.jpg", "16.jpg", "17.jpg", "18.jpg", "19.jpg", "20.jpg"], 0); 
    }); 

    function loadThumbs(files, index) { 
     var file = files[index]; 
     $("#container").append(file); 

     loadThumbs(files, index + 1);  
    } 

와 나는 기본적인 테스트했다

(if index < files.length) {...} 

와 논리를 둘러싸고 있습니다. IE 8이 스택 오버플로 예외로 인해 충돌합니다.

Answer 3

여기에서는 재귀를 사용하면 안되며 간단한 반복만으로는 충분하지 않습니다. jQuery는이 목적으로 $.each 함수를 사용합니다.

var $container = $('#container'); 

function loadThumbs(files) { 
    $.each(files, function(i, image_url) { 
     $('<img class="thumb" />').attr("src", image_url).appendTo($container); 
    }); 
}