Recursive jQuery load command

Question

In a previous post about Recursive jQuery load command the proposed code works but has some limitations. Here is the code that had been proposed and the link:

function loadTree($element) {
  $element.each(function(){
    this.load('url', function(){
      loadTree(this.find('.children'));
    });
  });
}

loadTree($('#content'));

The problem with the above code is that if loading is not successful, the recursive loop terminates. In my case I am loading images one after the other and I get the image URLs from the database via an AJAX call. If for some reason an image URL is incorrect, the recursion will stop and I do not want this thing to happen. The rest of the images must be loaded no matter what because if I have a hundred image paths where all of them are valid except for the first one, then all 100 will not show up.

I also have another related problem. Basically I was retrieving 7 image urls via ajax, I was then forming 7 html image tags in a string and then calling the load event with that string just once: all of this in an attempt to reduce the number of browser requests. Therefore I want the load event callback to trigger after all 7 images are loaded. However when I try this, the load event callback triggers for each and every image. Any ideas on how to trigger a callback when all items have been loaded (be it a successful load or not; an attempt to load).

Thanks

Just a thought but wouldn't it be better to return the image URL tree from a single call to your back end and then step through that in your client code? — Lazarus
– Lazarus, Commented Feb 11, 2011 at 11:03
I am not just getting URL, I get the URL, widths and heights, caption, etc... and getting the whole tree say for 1000 images would be too much defeating the purpose. — prince
– prince, Commented Mar 17, 2011 at 8:24

Zak Henry · Accepted Answer · 2011-02-11 11:00:24Z

0

I haven't been able to test this, but it should put you on the right track to cover your question.

With the complexity of what you are doing you should move to the more verbose $.ajax function, as it gives more callback functions at each time and tests for failure.

   function loadTree(element) {
    var elementsQueried = 0;
    $(element).each(function(index, value){

        $.ajax({
            url: 'url',
            success: function(returnValue){
                $(value).html(returnValue); //if successful ajax assign the returned html to the element
                loadTree($(value).find('.children')); //then continue searching the child tree
            },
            error: function(request,error) {
                $(value).html('File not found'); //else give some useful error message, but dont keep searching child tree

            },
            complete: function(){
                elementsQueried++;
                if (elementsQueried==$(element).length){
                    //callback
                }
            }
        });

    });
   }

Like I said I haven't been able to test it so there may be some issues, in particular with the scope of the elementsQueried var and how that is handled with the recursion.

answered Feb 11, 2011 at 11:00

Zak Henry

2,2052 gold badges28 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

prince Over a year ago

Thanks for your answer. I have used your suggested method a week or so later which worked well but I still changed strategy. I started returning a chunk of images from the ajax call and I was showing them in a scrollable div. Whenever the user via scrolling goes below the center point of the last thumbnail displayed, I get another chunk via another ajax call. This way I am using the optimizations implemented in the browsers to download the thumbnails in the order best determined by the browser and I am getting the next set of thumbnails only when they are required.

Collectives™ on Stack Overflow

Recursive jQuery load command

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related