Lazy Load IFRAMEs
Publikováno: 13.7.2020
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 […]
The post Lazy Load IFRAMEs appeared first on David Walsh Blog.
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:
See the Pen IFRAME Lazy Load by David Walsh (@darkwing) on CodePen.
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!
The post Lazy Load IFRAMEs appeared first on David Walsh Blog.