jQuery recursive image loading and IE

I'm trying to load a bunch of images recursively and it works perfectly in all browsers except the god-forsaken IE because of the restriction of 13 recursions.

Now I can fix this on my own, but I do want to follow "best practice", so to speak, since I'm still learning jQuery. And I'm guessing the gurus around here could give a helpful pointer. How would you suggest fixing it?

My code snippet:

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

If you try this in IE (8 in my case) you'll get Stack Overflow error.

Thanks!

I assume you're loading images one-by-one because it looks prettier, than loading them in parallel. A little rewrite should solve stack overflow problem:

Before:
loadThumbs(files, index+1);

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

And yes, add a check for array boundary at the top of your function: if (!files[index]) return;, I bet that's the reason why the code breaks in IE8.

I've tried it in firefox and IE 8 and it is failing. I've even tried it in IE 8 with no add ons.

From your code

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

As one of the comments asked, why use recursion at all? Try the following (excuse syntax errors).

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

Maybe what's happening in your case is that when index reaches 20 (out of bounds of array), you will get an undefined for your file variable. This doesn't crash the browser though and since you have a var type, it will pass the undefined variable around and maybe in IE 8 it keeps incrementing the index by 1 without gracefully ending.

The other option is putting a check in your recursive method. Surround the logic with

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

I did a basic test with

$(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 displays the 20 file names. IE 8 crashes with a stack overflow exception.

You should not use recursion here, simple iteration is more than adequate. jQuery has the $.each function for this purpose.

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

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