34242

Using Jquery to load one html file, delay, then another, looping

Question:

I'd like to show one html file. Then fade to another one. Here's my code and it works, except the first time, it waits 10 seconds to switch. Then after the switch, it waits 5 seconds in between switches. I'm a little confused as to how to jquery's handles timeouts and waits. I'd like to wait 5 seconds per switch, beginning with the first one.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> $(document).ready(function() { $("#responsecontainer3").load("ad1.html"); var refreshId = setInterval(function() { $("#responsecontainer3").fadeTo("slow").load('ad1.html?randval='+ Math.random()); setTimeout(function() { $("#responsecontainer3").fadeTo("slow").load('ad2.html?randval='+ Math.random()); }, 5000); }, 10000); }); </script> <div id="responsecontainer3"> </div>

Answer1:

function loadFile(url) { $("#responsecontainer3").load(url, function() { var index = parseInt( url.replace('ad','').replace('.html','') ); $("#responsecontainer3").fadeTo('slow', function() { setTimeout(function() { index++; loadFile('ad'+index+'.html'); }, 5000) }); }); } loadFile('ad1.html');

Answer2:

<script> $(document).ready(function() { $("#responsecontainer3").load("ad2.html"); var index = 1; var refreshId = setInterval(function() { $("#responsecontainer3").load('ad'+index+'.html'); index = (index == 2)? 1 : index+1; }, 5000); $.ajaxSetup({ cache: false }); }); </script>

Recommend

  • Selenium WebDriver setting ImplicitlyWait does nothing
  • asp.net login page issue
  • Is there a way to stop/re-start ejb 3.1 automatic timer during runtime?
  • SMT prover yields 'unknown' despite strong proven assertions
  • Gradle test fails with NullPointerException
  • Is there a chance to get -splash: work for SWT applications that require -XstartOnFirstThread?
  • Paramiko SSHException Channel Closed
  • Parallel sieve of Eratosthenes - Java Multithreading
  • Updating and removing unique join relationships in CakePHP
  • Most efficient way to replace lowest list values in dataframe in R
  • Jenkins Grails plugin does not list lastest versions of Grails
  • Multiple producers single consumer locking schema
  • Uncaught TypeError: $(…).select2 is not a function
  • Mysql - How to search for 26 records that each begins with the letter of the alphabet?
  • How to view images from protected folder with php?
  • D3 get axis values on zoom event
  • Code in Job's Script Block after Start-Process Does not Execute
  • Display images in Django
  • preg_replace Double Spaces to tab (\\t) at the beginning of a line
  • Custom validator control occupying space even though display set to dynamic
  • JSON response opens as a file, but I can't access it with JavaScript
  • DomPDF {PAGE_NUM} not on first page
  • formatting the colorbar ticklabels with SymLogNorm normalization in matplotlib
  • Javascript simulate pressing enter in input box
  • Uncaught Error: Could not find module `ember-load-initializers`
  • req.body is undefined - nodejs
  • Resize panoramic image to fixed size
  • Modifying destination and filename of gulp-svg-sprite
  • Importing jscolor library in angular 2
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • bootstrap to use multiple ng-app
  • How to get icons for entities from eclipse?
  • A cron job substitute?
  • Turn off referential integrity in Derby? is it possible?
  • apache spark aggregate function using min value
  • JaxB to read class hierarchy
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • UserPrincipal.Current returns apppool on IIS
  • java string with new operator and a literal