¿Carga diferida del iframe?

Question

Sé que hay algunas herramientas y técnicas para retrasar la carga de javascript, pero tengo un iframe que me gustaría retrasar la carga hasta que el resto de la página haya terminado de descargarse y renderizarse (el iframe está en un escondido que lo hará no se revelará hasta que alguien haga clic en una pestaña en particular en la página. ¿Hay alguna manera de retrasar la carga de un iframe? Cualquier sugerencia sería muy apreciada. ¡Gracias!

Answer 1

con jQuery es fácil!

o bien adjuntar el código que carga el i marco dentro de un $() o use $(document).ready(function(){}) estos dos son iguales y ejecutarían su código una vez que el DOM esté listo.

p. Ej.

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

ver más en http://www.learningjquery.com/2006/09/introducing-document-ready

Answer 2

Utilice Javascript en el evento onLoad, o en el botón clic manipulador, para establecer el atributo src del iframe.

Answer 3

O mi uso favorito

setTimeout('your app', 6000) 

que hará que sea esperar x número de milisegundos para llamar a cualquier función ....

Answer 4

no saben si necesita ejecutar sin javascript. Pero lo mejor es hacer méthode cambiar el src directa después de que el 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> 

Usando $ (document) .ready se iniciará la prestación de su marco flotante directa después de que el árbol DOM es construir, pero antes de que todo el contenido en tu lado está cargado, así que creo que esto no es lo que quieres.

jQuery tiene la .load evento, que es la misma que onload (después se cargan todos los recursos)

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

Answer 5

También puede aplicar display: none para el iframe con CSS, a continuación, utilizar .show de jQuery como esto :

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

Answer 6

Esto funciona para mí, pero tiene problemas si cambia el código en absoluto:

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

Usando:

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

Answer 7

Puede utilizar el atributo aplazar cuando es necesario cargar pasado después de CSS, JS, etc:

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

Answer 8

carga iFrame después de la página se ha cargado Con jQuery y un poco de html y 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>