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标记），并随机选择其中一个网址。然后，只使用选定的网址创建一个Iframe标记。

类似的东西：

＆＃13;

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

＆＃13;

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

＆＃13;

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

修改根除错误。（我已经用＆＃34;＆amp;＆＃34;编写了字符串，但在Javascript中你需要使用＆＃34; +＆＃34;）非常遗憾。 =（

Answer 2

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

使用random选择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

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

Answer 4

看起来有两个问题：

您正在隐藏iframe，但它们仍然在后台加载。您可以尝试使用包含源的数组，只创建一个iframe元素，或者将src标记留空，直到您准备加载它为止。
在显示任何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>

页面加载时随机iframe

4 个答案: