jQuery递归图像加载和IE

Question

我正在尝试以递归方式加载一堆图像，由于 13 次递归的限制，它在所有浏览器中都能完美运行，除了被上帝抛弃的 IE。

现在我可以自己解决这个问题，但我确实想遵循“最佳实践”，可以这么说，因为我还在学习 jQuery。而且我猜这里的大师可以提供有用的指导。 您建议如何解决？

我的代码sn-p：

$(文档).ready(函数(){ 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); }); 函数 loadThumbs（文件，索引）{ if(index == files.length) 返回； var 文件 = 文件 [索引]; 变种图像 = 新图像（）； $（图片） .load（函数（）{ $("#container").append(image); loadThumbs（文件，索引+1）； }) .addClass("拇指") .attr("src", 文件); }

如果您在 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)
} 

正如其中一位 cmets 所问，为什么要使用递归？请尝试以下方法（请原谅语法错误）。

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