Load iframe before other content

Question

I have an iframe loading on my page. The content of the iframe only loads after the rest of the content has loaded on the page. Is it possible to load the content within the iframe before the rest of the content on the main page?

Thanks

Its coming from a sub domain. The main domain is a wordpress site and its pulling in a form from a website on a sub domain — user2753924, Oct 06 '14 at 14:37
you can have display:none in your parent page except the iframe and when iframe finishes loading you need to communicate with parent page (http://stackoverflow.com/questions/9153445/how-to-communicate-between-iframe-and-the-parent-site) and reveal parent site content by removing display:none — Sharky, Oct 06 '14 at 14:43
Isn't there a way of forcing the iframe to load first with javascript? — user2753924, Oct 06 '14 at 14:57

score 1 · Answer 1 · answered Oct 06 '14 at 15:42

    <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

score 0 · Answer 2 · answered Oct 06 '14 at 16:59

Try

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

See jQuery.holdReady()

Load iframe before other content

2 Answers2

Linked