网页加载随机iframe

Question

我的首页底部有几个iframe（ http://www.binarycontrast.com ），在页面加载时会随机选择其中一个。 我在下面使用的代码可以正常工作，但是iframe的加载速度非常缓慢。 代码要做的是生成一个随机iframe以在页面加载时显示。 实际上，我从这里的另一个问题中获得了有关在页面加载时加载随机图像的代码，而我只是将其调整到了我需要的位置。

如果我在页面上只有一个iframe，它的加载速度会非常快，但是由于某种原因，使用此代码会使它的加载速度大大降低，因此，我希望找到一种加快iframe加载时间的方法，同时使用一些脚本来随机选择要显示的脚本。

一种替代方法或对我的代码的帮助将不胜感激。

请看下面的代码：

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

和用于使其工作的脚本：

$(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();
});

和CSS：

iframe.random-iframe { display: none; }

感谢您的任何帮助。

Answer 1

我认为问题专家建议您加载所有iframe。 即使您不需要的。 您只应保留Urls（而不是整个iframe代码），并随机选择其中一个网址。 然后，使用所选的网址创建一个Iframe代码。

像这样的东西：

 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> 

我希望你明白这一点。 我没有完全为您完成。

编辑：根除错误。 （我之前用“＆”组成了字符串，但是在Javascript中，您必须使用“ +”来完成此操作）很抱歉。 =（

Answer 2

尝试加载仅一个iframe，而不是加载所有iframe，然后隐藏其中一些。

使用random选择哪个URL将在src 。 然后使用

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);

Answer 3

使用代码将三个网址之一随机插入iframe src中会更好。

Answer 4

看起来有两个问题：

1. 您正在隐藏iframe，但它们仍在后台加载。 您可以尝试将数组与源一起使用，仅创建一个iframe元素，或者将src标签留空，直到准备好加载它为止。

2. 在显示任何iframe之前，您正在等待窗口加载（包括所有图像和iframe）。 如果您将代码更改为在文档准备就绪时运行，则代码将运行得更快。 更好的是，只要将脚本放置在DOM中的iframe之后，您甚至不需要等待整个文档加载。

 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.com/visit/24Option"></div> <div class="random-iframe" data-src="http://www.binarycontrast.com/visit/OptionFair"></div> <div class="random-iframe" data-src="http://www.binarycontrast.com/visit/StockPair"></div>