I run a blog that features lots of videos and other framed content.
a typical blogpost body i pull from my database looks like this:
<p>some text</p>
<iframe src="" width="400" height="300"></iframe>
<p>some text</p>
some posts have 2-3 iframes in them - the starting-page usually features 6-7 iframes.
i'd like to speed up the loading-time of my blog - is there a way i can make all iframes on my starting-page load asynchronously?
I run a blog that features lots of videos and other framed content.
a typical blogpost body i pull from my database looks like this:
<p>some text</p>
<iframe src="http://example." width="400" height="300"></iframe>
<p>some text</p>
some posts have 2-3 iframes in them - the starting-page usually features 6-7 iframes.
i'd like to speed up the loading-time of my blog - is there a way i can make all iframes on my starting-page load asynchronously?
Share Improve this question edited Jun 29, 2018 at 9:49 Matthias Schmidt asked Dec 20, 2014 at 13:25 Matthias SchmidtMatthias Schmidt 6162 gold badges11 silver badges27 bronze badges 5- IFRAMEs are loaded asynchronously. I guess your issue as more to see with setting some logic inside window onload event. Can you post any relevant link where your issue can be check? – A. Wolff Commented Dec 20, 2014 at 13:30
- Hello @A.Wolff, You can access my blog at tapefruit. – Matthias Schmidt Commented Dec 20, 2014 at 13:32
- 1 Ya i see what you mean. I'll try to find any workaround and let you know if i find any – A. Wolff Commented Dec 20, 2014 at 14:12
- I think your best bet is to use a preview image and only load specific iframe once image has been clicked. There is already some plugins doing it e.g, for youtube newmediacampaigns./blog/… You could i guess target other video provider websites with some little modifications – A. Wolff Commented Dec 20, 2014 at 15:37
- 1 Try running Yslow on your page. In particular, check out its remendations to speed up your site... – bastos.sergio Commented Jun 29, 2018 at 9:54
3 Answers
Reset to default 3As someone said in a ment, iframes load asynchronously. Perhaps what you're experiencing is a slow load of the main page while it is also loading the iframes contents. I would suggest using this technique:
<!DOCTYPE html>
<html>
<head>
<title>speedup page with iframes</title>
<head>
<script src="//ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
some content
<br>
some other content
<br>
<iframe id="data_a"></iframe>
<br>
some wild content appears
<br>
<iframe id="data_b"></iframe>
<br>
some wild content appears
<br>
<iframe id="data_c"></iframe>
<br>
the end
<script>
$(function(){
//the iframes will only load AFTER your
//main page is fully loaded
$("#data_a").attr("src", "http://domain1./some/path/news.html");
$("#data_b").attr("src", "http://domain2./gallery/pictures.html");
$("#data_c").attr("src", "http://domain3./contact/map.html");
});
</script>
</body>
</html>
I hope this helps!
I'll suggest you to have all your data with you and identify the iframes to load and use setTimeout to load different set of iframes with some time gap.
So, i read a lot about this topic in the last few days. Especially this article was helpful, since it discusses the actual problem I was facing: a belated onload() event that fires after all iframes are loaded.
After all, what I came up with are these lines of jQuery-Code that seems to work for me:
var src = new Array();
$(function(){
// onDomReady() store all iframe sources in array
$('iframe').each(function(){
src.push($(this).attr('src'));
$(this).attr('src', '');
});
});
$(window).load(function() {
// onload() restore all iframe sources from the array
var i = 0;
$('iframe').each(function(){
$(this).attr('src', src[i]);
i++;
});
});
So here's the deal: I tried a couple of times with and without this code and measured DomReady and Load events.
The DomReady event fires around the same time (before: 1.58s, after: 1.60s)
The Load event on the other hand fires waaay earlier (before: 8.19s, after: 1.92s)
In a way, this doesn't actually improve loading-speed, of course - anyway, in my opinion. the user experience is improved. Any ments or suggestions?