Lazy Load IFRAMEs
We've known for a decade that lazy loading resources like JavaScript, CSS, and especially images is a massive performance win for web pages. At first we used tricks and JavaScript to do the lazy loading, but more recently native image lazy loading has debuted in browsers.
Did you know that you can also lazy load IFRAMEs using the same loading="lazy" attribute and value?
<iframe
src="https://davidwalsh.name/"
loading="lazy"
onload="alert('Loaded!');"
/>
You can see how lazy loading IFRAMEs works with this demo:
This single attribute to perform a complex but useful operation is the ideal solution for lazy loading just about anything. I'm so thankful that browsers are implementing APIs that make using best practices so easy!
![Vibration API]()
Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user. One of those simple APIs the Vibration API. The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...
![CSS 3D Folding Animation]()
Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...
![Animated AJAX Record Deletion Using MooTools]()
I'm a huge fan of WordPress' method of individual article deletion. You click the delete link, the menu item animates red, and the item disappears. Here's how to achieve that functionality with MooTools JavaScript.
The PHP - Content & Header
The following snippet goes at the...
![Geolocation API]()
One interesting aspect of web development is geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user's location. Let's examine how you can...
This browser feature looks really like a huge gamechanger. Would love so much to use it with profit although it doesn’t seem to work correctly for me.
[First of all, using it with images instead of iframes always worked perfectly, so all this regards only loading=”lazy” for iframes.]
After hours of testing on different pages, what I see is that using loading=”lazy”, Iframes load WAY TOO EARLY.
This apparently buggy behavior happens only if the page itself is NOT loaded from another iframe. So this rules out CodePen as a viable tool to show this.
Let’s make a text.html file from this code, almost identical to your example, to highlight exactly what I’m saying:
https://gist.github.com/jeff-at-livecanvas/bb1a803465419c62d623305daf6722cd
Opening this file in a Chrome window, with an internal height of 700 pixels, shows the Loaded! message immediately.
Same happens with latest Firefox too.
Would be great if somebody could shed some light on this.