Skip to content

Instantly share code, notes, and snippets.

@Olanetsoft

Olanetsoft/index.html

Created May 25, 2025 16:24
Show Gist options
  • Save Olanetsoft/ec8927f80f3a8331c12fa8772f710dbd to your computer and use it in GitHub Desktop.
Save Olanetsoft/ec8927f80f3a8331c12fa8772f710dbd to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Olanetsoft created this gist May 25, 2025.
    89 changes: 89 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,89 @@
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Method 1: Native Lazy Loading</title>
    <link rel="stylesheet" href="css/styles.css" />
    </head>
    <body>
    <header>
    <h1>Method 1: Native Lazy Loading</h1>
    </header>

    <!-- Hero video - loads immediately -->
    <section class="hero">
    <video class="hero-video" autoplay muted playsinline loop>
    <source src="videos/hero-demo.mp4" type="video/mp4" />
    Your browser does not support the video tag.
    </video>
    <div class="hero-content">
    <h2>Native Lazy Loading</h2>
    <p>Simple and effective</p>
    </div>
    </section>

    <!-- Spacer to create scroll distance -->
    <div class="spacer">
    <div>
    <h2>Scroll down to see lazy loading in action</h2>
    <p>The video below won't load until you get close to it</p>
    </div>
    </div>

    <!-- Demo section -->
    <section class="demo-section">
    <h2>Native Lazy Loading Demo</h2>

    <!-- Lazy loaded video -->
    <div class="video-container">
    <video class="lazy-video" controls loading="lazy">
    <source src="videos/demo-video.mp4" type="video/mp4" />
    Your browser does not support the video tag.
    </video>
    </div>

    <!-- Code example -->
    <div class="code-example">
    <pre><code>&lt;video
    controls
    loading="lazy"
    &lt;source src="video.mp4" type="video/mp4"&gt;
    &lt;/video&gt;</code></pre>
    </div>

    <!-- Method information -->
    <div class="method-info">
    <h3>How Native Lazy Loading Works</h3>
    <p>
    The <code>loading="lazy"</code> attribute tells the browser to defer
    loading the video until it's about to enter the viewport. This is the
    simplest way to implement lazy loading with zero JavaScript required.
    </p>

    <div class="pros-cons">
    <div class="pros">
    <h3>Advantages</h3>
    <ul>
    <li>Zero JavaScript required</li>
    <li>Built into modern browsers</li>
    <li>Simple one-attribute implementation</li>
    <li>Automatic bandwidth savings</li>
    <li>No external dependencies</li>
    </ul>
    </div>
    <div class="cons">
    <h3>Limitations</h3>
    <ul>
    <li>Limited browser support for videos</li>
    <li>No control over loading threshold</li>
    <li>Cannot coordinate with autoplay</li>
    <li>Browser-dependent behavior</li>
    <li>No loading status feedback</li>
    </ul>
    </div>
    </div>
    </div>
    </section>
    </body>
    </html>