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
5
- where's the content of the iframe coming from?Alex– Alex2014-10-06 14:33:13 +00:00Commented Oct 6, 2014 at 14:33
- 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 domainuser2753924– user27539242014-10-06 14:37:26 +00:00Commented Oct 6, 2014 at 14:37
- Could you try and post something on jsfiddle?Alex– Alex2014-10-06 14:39:42 +00:00Commented Oct 6, 2014 at 14:39
- you can have display:none in your parent page except the iframe and when iframe finishes loading you need to communicate with parent page (stackoverflow.com/questions/9153445/…) and reveal parent site content by removing display:noneSharky– Sharky2014-10-06 14:43:22 +00:00Commented Oct 6, 2014 at 14:43
- Isn't there a way of forcing the iframe to load first with javascript?user2753924– user27539242014-10-06 14:57:25 +00:00Commented Oct 6, 2014 at 14:57
Add a comment |
2 Answers
<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> 
Comments
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") }); 