2009-10-19 118 views
8

我知道有一些工具和技術來延遲JavaScript的負載,但我有一個iframe,我想延遲加載,直到頁面的其餘部分完成下載和渲染(iframe處於隱藏狀態直到有人點擊一個特定的頁面上的標籤有沒有辦法延緩iframe的負載?任何建議將不勝感激。謝謝!iframe的延遲加載?

回答

6

與jQuery很容易!

要麼附上您的代碼,加載我框架在$() 或使用$(document).ready(function(){}) 這些都是相同的,並會在DOM準備好後執行您的代碼!

例如

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

多見於http://www.learningjquery.com/2006/09/introducing-document-ready

+0

事實證明,你的第一條線解決了一切。 我使用了一個可怕的模板用於從隨機網站下載的選項卡,並且它喜歡在完全加載的所有內容之前呈現隱藏的iframe。 當我切換到使用jquery選項卡(它看起來好多了啓動!),iframe渲染不再是一個問題。 jQuery ROCKS! 謝謝:) – Sean 2009-10-20 18:03:31

+0

在IE中,這可能會打破後退按鈕,因爲它會將新的iframe源添加到瀏覽器歷史記錄中。 – Sjoerd 2011-04-08 10:31:46

+5

這些天,當問及JavaScript時,jQuery中回答的人數很可怕。 – 2014-02-14 23:33:36

4

在onLoad事件或按鈕中使用Javascript單擊處理程序中,設置的iframe src屬性。

0

還是我最喜歡使用

setTimeout('your app', 6000) 

這將使等待的毫秒x次調用任何功能....

+5

您的示例中的''app''究竟代表什麼? – fresskoma 2012-11-12 21:00:06

8

不知道是否需要運行沒有JavaScript。但最好是梅索德做的改變src直接的iframe後:

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

使用$(文件)後,DOM樹是建立。就緒就可以開始您的iFrame的直接呈現,但在此之前所有的內容你的身邊已經加載,所以我認爲這不是你想要的。

jQuery有事件.load,(所有的資源被加載後)爲onload事件是同一

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

嘿愛斯基摩- 我假設你的答案是可行的,但我無法使它工作(我敢肯定這是由於我的問題)我沒有足夠的聲望投票給你但還是謝謝你的建議! – Sean 2009-10-20 18:07:59

1

您還可以應用顯示:無與CSS的iframe,然後使用jQuery的.show這樣:

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

即使在'display:none' dom子樹中,iframe仍會加載 - 它不會顯示。 – 2013-08-28 09:35:14

1

這對我的作品,但如果你更改代碼在所有有問題:

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

使用:

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

您可以使用defer屬性時需要加載CSS後最後,JS等:頁之後

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

這不起作用 – 2017-06-30 19:23:45

0

加載的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>