CODEWITHSUNDEEP
javascriptjqueryhtmliframe
user2753924
user2753924

Reputation: 465

Load iframe before other content

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

Upvotes: 2

Views: 5725

Answers (2)

guest271314
guest271314

Reputation: 1

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()

Upvotes: 0

alessandrio
alessandrio

Reputation: 4370

    <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

Upvotes: 1

Related Questions