延迟加载 iframe？答案

【问题标题】：Delay load of iframe?延迟加载 iframe？
【发布时间】：2009-10-19 08:27:59
【问题描述】：

我知道有一些工具和技术可以延迟 javascript 的加载，但我有一个 iframe，我想延迟加载，直到页面的其余部分完成下载和渲染（iframe 隐藏在在有人单击页面上的特定选项卡之前不会显示。有没有办法延迟 iframe 的加载？任何建议将不胜感激。谢谢！

【问题讨论】：

标签： javascript iframe delay

【解决方案1】：

使用 jquery 很容易！

或者附上你在$()中加载iframe的代码或使用$(document).ready(function(){}) 这些都是相同的，并且会在 DOM 准备好后执行您的代码！

例如

$(document).ready(function(){
    $('iframe#iframe_id').attr('src', 'iframe_url');    
});

在http://www.learningjquery.com/2006/09/introducing-document-ready查看更多信息

【讨论】：

事实证明你的第一行解决了一切。我为从随机网站下载的标签使用了一个可怕的模板，它喜欢将我隐藏的 iframe 呈现在所有内容的前面，直到它完全加载。当我切换到使用 jquery 选项卡（看起来更好启动！）时，iframe 渲染不再是问题。 jQuery 摇滚！谢谢:)
在 IE 中，这可能会破坏后退按钮，因为它会将新的 iframe 源添加到浏览器历史记录中。
如今，当被问及 Javascript 时，用 jQuery 回答的人数令人恐惧。
@PiyushSoni 我们花了数年时间让人们习惯于使用像 jQuery 这样的综合解决方案来帮助浏览器保持一致性，而现在纯粹主义者正在抱怨它？教育人比抱怨更有效。 :)

【解决方案2】：

不知道是否需要在没有 javascript 的情况下运行。但是最好的方法是直接在iframe之后改src：

<iframe id="myIframe" src="http://.." />
<script type="text/javascript">
  var iframe = document.getElementById('myIframe').src = iframe.src;
  iframe.src = '';
  document.onload =  function(){iframe.src = src;}
</script>

使用 $(document).ready 将在构建 DOM 树之后直接开始渲染你的 iframe，但在你这边的所有内容加载之前，所以我认为这不是你想要的。

jquery有事件.load，和onload一样（加载完所有资源后）

$(window).load(function(){  iframe.src = src; }

【讨论】：

嘿爱斯基摩人-我认为您的答案会起作用，尽管我无法使其起作用（我确定这是由于我的问题所致）:) 我没有声望足以让您投票，但感谢您的建议！

【解决方案3】：

我不明白为什么每个人都将 JAVASCRIPT 与 JQUERY 混淆，但是...

纯 JS 解决方案如下：（基本上它会等待 DOM 构建完成，然后加载页面中的所有 iframe）。

<iframe src="" data-src="YOUR ACTUAL iFRAME URL">
<script type="text/javascript">
      function load_iframes() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
      document.addEventListener("DOMContentLoaded", function(event) {
         load_iframes();
      });
    </script>

注意：小心使用 document.load 事件。任何有问题或必须花费 1 分钟加载的资源都会阻止您的代码执行。此代码 sn-p 已从 this reference 进行了调整（由 domcontentloaded 替换加载）。

【讨论】：

谢谢！ WhenWillJQueryDie.com

【解决方案4】：

在 onLoad 事件或按钮单击处理程序中使用 Javascript 来设置 iframe 的 src 属性。

【讨论】：

【解决方案5】：

你可以使用loading属性来lazy load iframes。

<iframe src="https://example.com"
        loading="lazy"
        width="600"
        height="400"></iframe>

【讨论】：

【解决方案6】：

这对我有用，但如果您更改代码就会出现问题：

function loadIFrame() {
    window.frames['BodyFrame'].document.location.href = "iframe.html";
}         
function delayedLoad() {
    window.setTimeout(loadIFrame2, 5000);
}

使用：

<iframe src="" onLoad="delayedLoad()"></iframe>

【讨论】：

【解决方案7】：

页面加载后加载 iFrame 使用 JQuery 和一点 html 和 js

// Javascript
$(window).bind("load", function() {
  $('#dna_video').prepend('<iframe src="//player.vimeo.com/video/86554151" width="680" height="383" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');
});

<!-- Append JQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- HTML -->
<div id="dna_video"></div>

【讨论】：

这段代码是唯一允许我在 canvas.js 之后加载 iFrame 的代码。使用此代码，画布会立即出现，并且 iFrame 会延迟，而在此之前，画布要等到 iFrame 加载后才会出现。谢谢阿米尔！

【解决方案8】：

在css、js等之后需要最后加载的时候可以使用defer属性：

iframe defer src="//player.vimeo.com/video/89455262"

【讨论】：

【解决方案9】：

window.setTimeout(function(){   
$("#myframe").attr("src","exp3.html");
$("#myframediv").show("slow");
},4000);

试试这个，这也有效。

【讨论】：

【解决方案10】：

您也可以使用 CSS 将 display:none 应用于 iframe，然后像这样使用 jQuery 的 .show：

$(document).ready(function(){ 
    $('iframe.class_goes_here').show(); 
});

【讨论】：

即使在 display:none dom 子树中 iframe 仍会加载 - 它只是不会显示。

【解决方案11】：

还是我最喜欢的用途

setTimeout('your app', 6000)

这将使它等待 x 毫秒来调用任何函数....

【讨论】：

您的示例中的 'your app' 究竟代表什么？