How To Lazy Load Images Example

<!DOCTYPE html>
<html>
<head>
<title>Lazy Load Images Example</title>
<style>
  .spacer {
    height: 4000px; /* This pushes the second image off screen */
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    color: #666;
  }
  img {
    display: block;
    margin: 20px auto;
    border: 5px solid #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }
</style>
</head>
<body>
  <h2>Lazy Load Image Test</h2>
  <p>The first image below is loaded eagerly (immediately). The second image is set to "lazy" and will only load once you scroll close to it.</p>

<p>If you open your browser's network tab, you'll see the second kitten image won't download until you've scrolled down (assuming the image isn't already cached).</p>

<div class="spacer">Scroll down to see the lazy-loaded image...</div>

</body>
</html>