web-dev-qa-db-ja.com

iframeの読み込みを遅らせますか？

Javascriptの読み込みを遅らせるためのツールやテクニックがいくつかあることは知っていますが、ページの残りの部分がダウンロードとレンダリングを完了するまで読み込みを遅らせたいiframeがあります（iframeは非表示になっていて、誰かがページの特定のタブをクリックするまで表示されます。iframeの読み込みを遅らせる方法はありますか？何か提案をいただければ幸いです。ありがとうございます。

javascriptiframedelay
13
Sean

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 を参照してください。

10
Tzury Bar Yochay

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; }
8
Andreas Köberle

OnLoadイベントまたはボタンクリックハンドラーでJavascriptを使用して、iframeのsrc属性を設定します。

4
devio

これは私にとってはうまくいきますが、コードを変更すると問題が発生します。

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

使用：

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

Css、jsなどの後に最後にロードする必要がある場合はdefer属性を使用できます。

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

ページが読み込まれた後に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>
1
Amir Hosseinzadeh

なぜみんなが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分を費やす必要があるリソースは、コードの実行を停止します。このコードスニペットは、 この参照 から微調整されています（loadがdomcontentloadedに置き換えられています）。

1
MarketerInCoderClothes

CSSを使用してdisplay：noneをiframeに適用し、jQueryの.showを次のように使用することもできます。

$(document).ready(function(){ 
    $('iframe.class_goes_here').show(); 
});
0
Ian R.
window.setTimeout(function(){   
$("#myframe").attr("src","exp3.html");
$("#myframediv").show("slow");
},4000);

これを試してください、これも機能します。

0
Poorna