I have a few iframes on my homepage at the bottom (), 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.

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.

An alternative method or help with the code I have would be really appreciated.

Please see the below code:

<iframe class="random-iframe" src="" width="100%" height="700" frameborder="0" scrolling="yes" seamless="seamless"></iframe>
<iframe class="random-iframe" src="" width="100%" height="700" frameborder="0" scrolling="yes" seamless="seamless"></iframe>
<iframe class="random-iframe" src="" width="100%" height="700" frameborder="0" scrolling="yes" seamless="seamless"></iframe>

And the script used to make it work:

$(window).load(function(){
var divs = $("iframe.random-iframe").get().sort(function(){
  return Math.round(Math.random())-0.5; //random so we get the right +/- bo
}).slice(0,1)
$(divs).appendTo(divs[0].parentNode).show();
});

And the css:

iframe.random-iframe { display: none; }

Thanks for any help in advance.

I have a few iframes on my homepage at the bottom (http://www.binarycontrast.), 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.

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.

An alternative method or help with the code I have would be really appreciated.

Please see the below code:

<iframe class="random-iframe" src="http://www.binarycontrast./visit/24Option" width="100%" height="700" frameborder="0" scrolling="yes" seamless="seamless"></iframe>
<iframe class="random-iframe" src="http://www.binarycontrast./visit/OptionFair" width="100%" height="700" frameborder="0" scrolling="yes" seamless="seamless"></iframe>
<iframe class="random-iframe" src="http://www.binarycontrast./visit/StockPair" width="100%" height="700" frameborder="0" scrolling="yes" seamless="seamless"></iframe>

And the script used to make it work:

$(window).load(function(){
var divs = $("iframe.random-iframe").get().sort(function(){
  return Math.round(Math.random())-0.5; //random so we get the right +/- bo
}).slice(0,1)
$(divs).appendTo(divs[0].parentNode).show();
});

And the css:

iframe.random-iframe { display: none; }

Thanks for any help in advance.

• javascript
• jquery
• iframe

4 Answers 4

I think the Problem ist that you load all the iframes. Even the ones you don't need. You should only hold your Urls (Not the whole iframe tags) and the make a random select for one of the urls. Only then create a Iframe tag with the selected url.

something like this:

function getRandomUrl(urls) {
    var minIndex = 0;
    var maxIndex = urls.length - 1;
    var randomIndex = Math.floor(Math.random() * (maxIndex - minIndex)) + minIndex;
    return urls[randomIndex];
}

var urls = [
"url1",
"url2",
"url3"];

var randomSelectedUrl = getRandomUrl(urls);

$("#hereComesTheIframeInto").html(
"<iframe class='random-iframe' src='" + randomSelectedUrl + "' width='100%' height='700' frameborder='0' scrolling='yes' seamless='seamless'></iframe>");

<div id="hereComesTheIframeInto"></div>

I Hope you get the point. I didn't finish it pletely for you.

EDIT: eradicated error. (I have posed the strings with "&" before but in Javascript you have to do this with "+") Sorry for this. =(

Instead of loading all the iframes, and then hiding some of them, try to generate only one iframe.

Use random to chose which url will be in the src. Then use

var chosenURL = 'url'; // The url you randomly chose
var parentNode = 'iframe-container'; // Where you want to put your iframe
$('<iframe class="random-iframe" src="'+chosenURL+'" width="100%" height="700" frameborder="0" scrolling="yes" seamless="seamless"></iframe>').appendTo(parentNode);

You would be far better of using your code to insert one of three urls randomly into the iframes src.

Looks like there are two issues:

1. You're hiding the iframes but they're all still loading in the background. You could try using an array with the sources and just creating a single iframe element, or leaving the src tag blank until you're ready to load it.

2. You're waiting for the window to load, including all images and iframes, before showing any iframe. If you changed the code to run when the document is ready then the code will run much sooner. Better yet, as long as the script is placed after the iframes in the DOM, you don't even need to wait for the whole document to load.

function loadRandomIFrame() {
  var divs = document.querySelectorAll(".random-iframe"),
      div  = divs[Math.round(Math.random() * (divs.length - 1))],
      frame = document.createElement("iframe");
  
  frame.width = "100%";
  frame.height = 700;
  frame.frameborder = 0;
  frame.scrolling = "yes";
  frame.seamless = "seamless";
  frame.src = div.dataset.src;
  
  div.parentNode.appendChild(frame);
}

loadRandomIFrame();

<div class="random-iframe" data-src="http://www.binarycontrast./visit/24Option"></div>
<div class="random-iframe" data-src="http://www.binarycontrast./visit/OptionFair"></div>
<div class="random-iframe" data-src="http://www.binarycontrast./visit/StockPair"></div>