Lazy Load IFRAMEs

By  on  

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!

Recent Features

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

  • By
    CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

Incredible Demos

  • By
    Dynamic Waveform Visualizations with wavesurfer.js

    Waveform images are an awesome addition to boring audio widgets.  They can be functional as well as aesthetically pleasing, allowing users to navigate audio visually.  I recently found wavesurfer.js, an amazing waveform image utility that uses to Web Audio API to create super customizable...

  • By
    MooTools Font-Size Scroller with Cookie Save

    Providing users as many preferences as possible always puts a smile on the user's face. One of those important preferences is font size. I can see fine but the next guy may have difficulty with the font size I choose. That's why...

Discussion

  1. 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.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!