在其他内容之前加载 iframe答案

【问题标题】：Load iframe before other content在其他内容之前加载 iframe
【发布时间】：2014-10-07 00:59:14
【问题描述】：

我的页面上有一个 iframe 加载。 iframe 的内容仅在页面上的其余内容加载后加载。是否可以先加载 iframe 中的内容，然后再加载主页上的其他内容？

谢谢

【问题讨论】：

iframe 的内容从何而来？
它来自一个子域。主域是一个 wordpress 网站，它从子域上的网站中提取表单
你能尝试在 jsfiddle 上发布一些东西吗？
除了 iframe 之外，您的父页面中可以有 display:none，当 iframe 完成加载后，您需要与父页面 (stackoverflow.com/questions/9153445/…) 通信并通过删除 display:none 来显示父站点内容跨度>
难道没有办法强制 iframe 先用 javascript 加载吗？

【解决方案1】：

    <iframe id="miiframe" src="http://www.apple.com"></iframe>
    <!-- example -->
    <div id="loading" style="position:fixed;background:red;width:100%;height:100%;top:0;left:0;z-index:2;"></div>
    <img id="background" style="position:absolute;width:100%;height:100%;top:0;left:0;z-index:-1;"/>

<script>
var loaded = false;
console.log(loaded);
function preloader(){
            document.getElementById("loading").style.display = "none";
            document.getElementById("miiframe").style.display = "block";
    loaded = true;
            console.log(loaded);
}//preloader
var loadiframe = document.getElementById('miiframe');
loadiframe.onload = preloader;

if(!loaded){
    window.onload = function(){
        background = document.getElementById("background");
        background.src ="http://www.hdwallpapers.in/walls/cute_baby_in_autumn-wide.jpg";
    };
}
</script>

see JSFIDDLE

【讨论】：

【解决方案2】：

试试

// hold `ready` event
$.holdReady(true);

var frame = $("<iframe>");

$(frame).load(function(e) {
    // release `ready` event
    $.holdReady(false)
});

// append `frame` to document
$("body").append(frame);

$(document).ready(function() {
  // do stuff 
  // after `frame` loaded
  $("body").append("done")
});

jsfiddle http://jsfiddle.net/guest271314/x7ptnbjy/

见jQuery.holdReady()

【讨论】：