javascript - 页面加载时的随机 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。甚至那些你不需要的。您应该只保留您的网址(而不是整个 iframe 标签)并随机选择其中一个网址。然后才使用选定的 url 创建一个 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 中你必须用“+”来完成)非常遗憾。 =(