jQuery递归图像加载和IE

我试图加载一堆图像递归，它在所有的浏览器除了神遗忘的IE完美的作品，因为13次递归的限制。jQuery递归图像加载和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在我的情况），你会得到堆栈溢出错误。

谢谢！

来源

2011-02-18 Alexander Filatov

也许我只是不明白它，但你如何停止递归？ – Dalen 2011-02-18 11:49:22

只是一个说明，你为什么使用递归？一个简单的循环遍历数组中的项目就可以了。 – Ozzy 2011-02-18 11:54:01

该死的，我的坏。我忘了我取消了停止条件。在函数的开头我会做“if（index == files.length）return;”所以停止递归不是问题所在。即使在所有20个文件加载完毕后停止，所有浏览器都会正确显示页面，并且IE在13次递归后失败。 – 2011-02-18 13:31:58

我假设你逐个加载图像，因为它看起来更漂亮，而不是并行加载它们。一点点改写应解决堆栈溢出问题：

Before: 
loadThumbs(files, index+1); 

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

是的，你的函数的顶部添加对数组边界检查：if (!files[index]) return;，我敢打赌，这就是为什么在IE8中的代码休息。

来源

2011-02-18 13:18:00

我试过在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);  
    }

火狐显示20个文件名。 IE 8因堆栈溢出异常而崩溃。

来源

2011-02-18 13:07:23 Kamal

对不起，我忘了我删除了停止条件:)在loadThumbs函数的开头应该有这样一行：“if（index == files.length）return true;”所以当我到达数组的末尾时，我退出加载。但这不是问题。问题在于IE在全局上下文中不允许超过13次函数递归。 – 2011-02-18 13:37:04

你不应该在这里使用递归，简单的迭代是绰绰有余的。 jQuery具有用于此目的的$.each函数。

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

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

来源

2011-02-18 13:20:52

jQuery递归图像加载和IE

回答

相关问题