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），您将收到Stack Overflow错误。

谢谢！

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

我在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因堆栈溢出异常而崩溃。

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

jQuery递归图像加载和IE

3 个答案: