jQuery рекурсивная загрузка изображений и IE

Question

Я пытаюсь загрузить кучу изображений рекурсивно, и она отлично работает во всех браузерах, кроме забытого в IE из-за ограничения 13 рекурсий.

Теперь я могу это исправить самостоятельно,но я хочу следовать, так сказать, «лучшей практике», так как я все еще изучаю 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);
}

Если вы попробуете это в IE (в моем случае 8), вы получите ошибку переполнения стека.

Спасибо!

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

Вы не должны использовать рекурсию здесь, простая итерация более чем адекватна.Для этого в jQuery есть функция $.each.

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

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

Answer 3

Я пробовал это в Firefox и 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 без постепенного завершения.

Другим вариантом является проверка вашего рекурсивного метода. Окружите логику с помощью

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

Я сделал базовый тест с

$(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);       
    }

Firefox отображает 20 имен файлов. IE 8 падает с исключением переполнения стека.