我知道有一些工具和技术可以延迟javascript的负载,但我有一个iframe,我想延迟加载,直到页面的其余部分完成下载和渲染(iframe是隐藏的,不会是显示,直到有人点击页面上的特定选项卡。有没有办法延迟iframe的加载?任何建议将非常感谢。谢谢!
用jquery很容易!
或者将你的代码加载到$()
中的iframe或使用$(document).ready(function(){})
这些都是相同的,并在DOM准备好后执行你的代码!
EG
$(document).ready(function(){
$('iframe#iframe_id').attr('src', 'iframe_url');
});
在http://www.learningjquery.com/2006/09/introducing-document-ready看到更多
或者我最喜欢的用途
setTimeout('your app', 6000)
这将使它等待x毫秒来调用任何函数....
不知道是否需要在没有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; }
在onLoad事件或按钮单击处理程序中使用Javascript来设置iframe的src属性。
这适用于我,但如果您更改代码则会出现问题:
function loadIFrame() {
window.frames['BodyFrame'].document.location.href = "iframe.html";
}
function delayedLoad() {
window.setTimeout(loadIFrame2, 5000);
}
使用:
<iframe src="" onLoad="delayedLoad()"></iframe>
页面加载后加载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>
您也可以使用CSS将display:none应用于iframe,然后像这样使用jQuery的.show:
$(document).ready(function(){
$('iframe.class_goes_here').show();
});
在css,js等之后需要加载时可以使用defer属性:
iframe defer src="//player.vimeo.com/video/89455262"
window.setTimeout(function(){
$("#myframe").attr("src","exp3.html");
$("#myframediv").show("slow");
},4000);
试试这个,这也行得通。
我不明白为什么每个人都把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替换加载)。