jquery - Loop through an Array of links and dynamically load the contents of each after a set interval -
using jquery loop through array of links , load contents of each link div after set interval. example, if have parent page "parent.html" , array of links - "test1.html, test2.html , test3.html" load test1.html div within parent.html , after set interval replace test1.html test2.html , test3.html repeating process indefinitely.
i appreciate if me out. have tried using .get() , settimeout() don't have expertise , experience put together. welcome.
thank you.
this want.
you can view working demo here. loads each link once, caches result. subsequent iterations pull 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>
Comments
Post a Comment