load list of links one at a time as soon as previous finishes
<p>Similar to <a href="http://stackoverflow.com/questions/5357094/show-a-list-of-links-in-an-iframe-one-at-a-time-with-jquery">Show a list of links in an iframe one at a time with jquery</a> but without the setTimeout function - as i would rather start the next fetch once the previous document as finished loading.  </p>

<p>I'm a noob with javascript and even more so with jquery, but here was my first shot:</p>

<pre><code>links = ["http://example1.com","http://example2.com","http://example3.com"]
function loadNext(x){
  if ( x &lt; links.length ){
    $('#target').load('links[x]');
    $('#target').ready(function(){
        x++;
        loadNext(x);
    });
  };
};

$(document).ready(function(){
  $('.loader').click(function(){
    loadNext(0);
  });
});

&lt;/script&gt;
&lt;div id="bd" role="main"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#" class="loader"&gt;Start loading&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div id="target"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I can't really see why this wouldn't work.  The logic seems correct at least. on click fire a function with index 0 passed in, then load that array value (full url) in id="target " and once that target is ready run the function again.  Clicking doesn't appear to even load the first target, much less iterate (i had expected it to redirect the first click until i figured out the proxy stuff...)</p>
