title: Random iframe on page load
body: <p>I have a few iframes on my homepage at the bottom (<a href="http://www.binarycontrast.com" rel="nofollow">http://www.binarycontrast.com</a>), where one is randomly selected on page load. The code I'm using below works, but the iframes load really slowly. What the code does is generate a random iframe to display on page load. I actually got the code from another question on here regarding loading random images on page load, and I just tweeked it to what I needed.</p>
  
  <p>If I have a single iframe on the page it loads really quickly, but for some reason using this code slows it down a lot, so I want a way to speed up the iframe loading time whilst using some script to randomly choose one to display.</p>
  
  <p>An alternative method or help with the code I have would be really appreciated.</p>
  
  <p>Please see the below code:</p>
  
  <pre><code>&lt;iframe class="random-iframe" src="http://www.binarycontrast.com/visit/24Option" width="100%" height="700" frameborder="0" scrolling="yes" seamless="seamless"&gt;&lt;/iframe&gt;
  &lt;iframe class="random-iframe" src="http://www.binarycontrast.com/visit/OptionFair" width="100%" height="700" frameborder="0" scrolling="yes" seamless="seamless"&gt;&lt;/iframe&gt;
  &lt;iframe class="random-iframe" src="http://www.binarycontrast.com/visit/StockPair" width="100%" height="700" frameborder="0" scrolling="yes" seamless="seamless"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>And the script used to make it work:</p>
  
  <pre><code>$(window).load(function(){
  var divs = $("iframe.random-iframe").get().sort(function(){
    return Math.round(Math.random())-0.5; //random so we get the right +/- combo
  }).slice(0,1)
  $(divs).appendTo(divs[0].parentNode).show();
  });
  </code></pre>
  
  <p>And the css:</p>
  
  <pre><code>iframe.random-iframe { display: none; }
  </code></pre>
  
  <p>Thanks for any help in advance.</p>