---
title: "Lazy Load Iframe — Free Framer component · Best of Framer"
description: "Free Framer component · by Zlatko Marjanović · Loaders. Keep Iframes and Your Website Speed"
canonical: "https://framer.elliotli.dev/component/lazy-load-iframe"
---

[Home](/)/[Components](/components)/[Loaders](/components/category/loaders)/Lazy Load Iframe

# Lazy Load Iframe

Keep Iframes and Your Web Speed

[View on Framer](https://framer.com/marketplace/components/lazy-load-iframe/?via=elliot-li)

![Lazy Load Iframe preview image 1](https://framer.elliotli.dev/og/component/lazy-load-iframe/85733e2f394e95dd/1600x1200.jpg)

## Summary

Keep Iframes and Your Website Speed

## Description

## What This Component Solves

Most iframe embeds load instantly, even if the visitor never scrolls to them. That can trigger heavy third-party scripts too early, increase network work, and hurt speed metrics.

Lazy IFrame delays the embed until it is actually needed, so your above-the-fold experience stays lightweight and responsive.

## Core Features

-   Loads the iframe only when it enters view using IntersectionObserver
    
-   Loads once per URL to avoid duplicate work
    
-   Uses requestIdleCallback when available to mount during idle time
    
-   Holds layout space to avoid layout shift while loading
    
-   Works responsively inside Framer layouts
    
-   No external dependencies
    

## Loading Experience

Instead of a blank box, Lazy IFrame can show a minimal glass-style loader that looks like a lightweight dashboard placeholder. This makes the loading state feel intentional and premium, without distracting motion.

-   Structured UI skeleton placeholder
    
-   Subtle shimmer animation
    
-   Customizable surface, accent, and shimmer speed
    
-   Keeps the page stable while the iframe initializes
    

## **Work with me:** [**https://www.upwork.com/freelancers/webflowzlatko**](https://www.upwork.com/freelancers/webflowzlatko)

**My website:** [**zlatkomarjanovic.com**](http://zlatkomarjanovic.com)

**Insights:** [**zlatkomarjanovic.com/blog**](http://zlatkomarjanovic.com/blog)

**Follow me on X:** [**https://x.com/thezlatkom**](https://x.com/thezlatkom)

**Follow me on Linkedin:** [**https://www.linkedin.com/in/zlatkomarjanovic/**](https://www.linkedin.com/in/zlatkomarjanovic/)

## Rank history [How rankings work →](/terms#rankings)

-   All · #6066

## Details

- **Author**: Zlatko Marjanović
- **Published**: 2026-03-02
- **Updated**: 2026-09-10
- **Added**: 2026-02-21
- **Categories**: Loaders

## More like this

-   [Preloader Pro V4](/component/preloader-pro-v4) — Interface Studio · $12 — Your Website, Beautifully Unveiled
-   [Circleloader](/component/circleloader) — gustavwf · $5 — Circular logo reveal loader.
-   [AI Text Loading](/component/ai-text-loading) — Syauqizaidan Khairan Khalaf · $5 — Thinking phrases with a shimmer
-   [Preloader Pro V3](/component/preloader-pro-v3) — Interface Studio · $10 — Set the Stage Before the Story