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

Answer: 
```
    <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](http://jsfiddle.net/1k6atmL5/)`
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()](http://api.jquery.com/jQuery.holdReady/)