<p style="margin-bottom: 1000px;">Please scroll down. The image is below the viewport.</p>
<p style="margin-bottom: 1000px;">Way to go&hellip;</p>

<h4>Lazy cat loaded lazily</h4>
<p>If your browser supports native lazy-loading, it loads the first 2 kB of the image in order to display a placeholder. Then, it loads the full-size image.</p>
<p>If your browser does not support native lazy-loading, it loads the lazysizes library and sets the <code>img</code>'s <code>src</code> to a low-quality image placeholder, which is also around 2 kB in size. Then, it loads the full-size image.</p>
<div class="alert alert-warning">The native lazy-loading's 2 kB range request do not work from within Codepen. However, you can make this work by copying this to an empty HTML file on your computer.</div>
<img data-src="https://demo.tiny.pictures/native-lazy-loading/lazy-cat.jpg?width=500" data-lqip="https://demo.tiny.pictures/native-lazy-loading/lazy-cat.jpg?width=500&blur=5&quality=10" loading="lazy" alt="Lazy cat loaded lazily">

<script>
  const images = document.querySelectorAll("img[loading='lazy']")
  if ("loading" in HTMLImageElement.prototype) {
    // native lazy-loading supported
    for (const image of images) {
      image.src = image.dataset.src
    }
  } else {
    // native lazy-loading not supported
    // dynamically load the lazysizes library
    import("https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.1.5/lazysizes.min.js")
    for (const image of images) {
      // request the low-quality image placeholder
      image.src = image.dataset.lqip
      // enable lazy-loading when user scrolls image into view or browser is idle
      image.classList.add("lazyload")
    }
  }
</script>

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.