Loop through an Array of links and dynamically load the contents of each after a set interval

Question

Using jQuery I would like to loop through an array of links and load the contents of each link into a DIV after a set interval. For example, if I have my parent page \"paren

Answer 1

I would assume the requirement is to load the content of the linked page, not just the link href? Here's the one based on Jonathan's.

  <div id="content"></div>
  <script type="text/javascript">
    $(function(){
      var links = ["index.html","pictures.html","contact.html"];
      var curr  = 0;
      setInterval(function(){
        if (curr++ > links.length) curr = 0;
        $("#content").load(links[curr]);
      }, 2000);
    });
  </script>

Answer 2

DOM manipulation is expensive. Try not to do it if you can avoid it.

Are the links you're loading static or dynamic? Meaning once loaded do you need to load them again? If the answer is no then do this:

<div id="carousel"></div>

with CSS:

#carousel div { display: none; }

and:

var pages = ["text1.html", "text2.html", "text3.html"];

$(function() {
  for (int i=0; i<pages.length; i++) {
    $("<div></div>").appendTo("#carousel").load(pages[i]);
  }
  setInterval(rotate_pages, 5000);
});

function rotate_pages() {
  var carousel = $("#carousel");
  var pages = $(carousel).children();
  var visible = pages.filter(":visible");
  if (visible.length == 0) {
    pages.get(0).fadeIn();
  } else {
    var index = pages.index(visible);
    index++;
    if (index >= pages.length) [
      index = 0;
    }
    visible.fadeOut(function() {
      pages.get(0).fadeIn();
    });
  }
}

This way you only load the pages once and just hide/show divs as needed to rotate through them.

Answer 3

This will do what you want.

You can view a working demo here. It only loads each link once, then caches the result. Subsequent iterations simply pull from the cache.

$(function(){
   var curIdx = 0,
       urls   = $.map($("#links a"),function(el){ return $(el).attr('href') }),
       cache  = {};

   function nextPage(){
       var url  = urls[curIdx],
           data = cache[url];

       curIdx += 1; if(curIdx == urls.length) curIdx = 0;

       if(!data){
         $("#content").load(url, function(data){
           cache[url] = data;
           nextTimer();
         })
       } else {
         $("#content").html(data);
         nextTimer();
       }
   };

   function nextTimer(){
     window.setTimeout(function(){ nextPage() }, 3000); // 3 Seconds
   }

   nextPage();
});

HTML

<ul id="links">
  <li><a href="test1.html">Test 1</a></li>
  <li><a href="test2.html">Test 2</a></li>
  <li><a href="test3.html">Test 3</a></li>
</ul>
<div id="content">

</div>

Answer 4

This will switch every 2 seconds (2000 milliseconds). Test online at http://jsbin.com/owoxo

<div id="link"><a href="#">#</a></div>

--

var l = ["index.html","pictures.html","contact.html"], c = 0;
setInterval(function(){
  $("#link a").attr("href",l[c]).html(l[c]);
  if (c++ > l.length) c = 0;
}, 2000);