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 "parent.html" and an array of links - "test1.html, test2.html and test3.html" I would like to initially load test1.html into a div within parent.html and then after a set interval replace test1.html with test2.html and then test3.html repeating the process indefinitely.

I would really appreciate if someone could help me out. I have tried using .get() and also setTimeout() but just don't have the expertise and experience to put this all together. Any help would be very welcome.

Thank you.

Answer 1

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 2

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

Answer 3

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 4

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>