title: Load the source of an iFrame after a delay
body: <p>I have two iFrames on a Wordpress page that automatically refresh every 10 seconds, and I want to offset the time that they refresh by 5 seconds. I came up with the idea to load one iframe in when the page loads, and load the second iframe in after a 5 second delay.</p>
  
  <p>So far, the following code waits 5 seconds to <strong>display</strong> the second iframe, but they still end up refreshing at the same time.</p>
  
  <p>I have been working all day on this, and I feel like I'm missing something really simple.</p>
  
  <pre><code>&lt;iframe width="100%" id="delayFrame" src="http://example.com"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>Here is the jQuery:</p>
  
  <pre><code>jQuery(function($){
  jQuery("#delayFrame").slideUp(300).delay(5000).fadeIn(400);  });
  </code></pre>
  
  <p>Here is the code that the iFrames use to refresh, located in the source file itself: </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      var refreshId = setInterval(function() {
      var fadeInData = function fadeInData() { $("#responsecontainer").fadeIn(); }
      var delaydata = function delayData(){$("responsecontainer").delay('5000');}
      var loadData = function loadData() { $("#responsecontainer").load('display.php', fadeInData); }
      $("#responsecontainer").fadeOut(loadData);
      }, 10000);
  $.ajaxSetup({ cache: false });
  
  
  });
  </code></pre>
  
  <p></p>