Question

我知道有一些工具和技术可以延迟javascript的负载，但我有一个iframe，我想延迟加载，直到页面的其余部分完成下载和渲染（iframe隐藏在直到有人点击页面上的特定标签才会显示。有没有办法延迟iframe的加载？任何建议都会非常感激。谢谢！

Answer 1

用jquery很容易！

要么将您的代码括在$()内，请加载iframe 或使用$(document).ready(function(){}) 这两者都是相同的，并且会在DOM准备好后执行你的代码！

e.g。

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

在http://www.learningjquery.com/2006/09/introducing-document-ready

了解详情

Answer 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 Tree之后开始直接呈现您的Iframe，但是在加载您身边的所有内容之前，我认为这不是您想要的。

jquery有事件.load，它与onload相同（在加载所有资源之后）

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

Answer 3

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

Answer 4

这适用于我，但如果您更改代码则会出现问题：

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

使用：

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

Answer 5

加载页面后加载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>

Answer 6

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

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

Answer 7

你可以在css，js等之后需要加载时使用defer属性：

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

Answer 8

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

尝试一下，这也可以。

Answer 9

我不明白为什么每个人都将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分钟才能加载的资源都会使您的代码无法执行。从this reference调整了此代码段（由domcontentloaded替换了负载）。

Answer 10

您可以将加载属性用于 lazy load iframes。

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

Answer 11

或者我最喜欢的用途

setTimeout('your app', 6000)

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

延迟加载iframe？

11 个答案: