jQuery 递归图像加载和 IE

Question

我正在尝试以递归方式加载一堆图像，并且由于 13 次递归的限制，它在所有浏览器中都能完美运行，除了被上帝遗弃的 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);
}

如果你在 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) {...}

我用 Firefox 做了一个基本测试，

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

显示了 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);
    });
}