Progressively Load Images & Iframes Using Plain JavaScript – ProgressiveMedia

Category: Javascript , Loading | February 27, 2019
Views Total:356 views
Official Page:Go to website
Last Update:February 27, 2019


Progressively Load Images & Iframes Using Plain JavaScript – ProgressiveMedia


The ProgressiveMedia is a vanilla JavaScript plugin used to loads images and iframes progressively as they’re scrolled into view.

Suitable for content-heavily web apps such as portfolios, galleries, photo sharing apps, etc.

It also provides a Medium-spired blur effect for images before lazy load. Any iframe content is supported as well: Google Maps, Youtube Videos, Facebook Like Page, Instagram posts, etc.

See also:

How to use it:

Install & download the ProgressiveMedia with NPM:

$ npm install progressive-media --save

Import the necessary JavaScript and CSS files into the document.

<link href="/path/to/progressive-media.min.css" rel="stylesheet">
<script async src="/path/to/progressive-media.min.js"></script>

Embed images & iframe content into the document as follows:

<div class="progressive-media progressive-media-image progressive-media-loaded"
   style="max-width: 392px; max-height: 260px;" data-img-src="images/01.jpeg">
  <div class="progressive-media-aspect" style="padding-bottom: 66.32653061%;">
      <div class="progressive-media-aspect-inner">
          <img class="progressive-media-image-placeholder progressive-media-content progressive-media-blur"
               style="opacity: 1; visibility: visible" src="images/01-placeholder.jpeg">
          <img class="progressive-media-image-placeholder progressive-media-image-placeholder-edge progressive-media-content"
               style="opacity: 1; visibility: visible" src="images/01-placeholder.jpeg">
              <img src="images/01.jpeg"
                   class="progressive-media-image-original progressive-media-content">
<div class="progressive-media progressive-media-iframe progressive-media-unloaded" style="max-width: 500px; max-height: 408px;" data-src="">
  <div class="progressive-media-aspect" style="padding-bottom: 81.6%;">
      <div class="progressive-media-aspect-inner">
              <iframe src="" class="progressive-media-content"></iframe>

Initialize the ProgressiveMedia library and done.

var progressiveMediaOptions = {
    // viewport offset to trigger the loading event
    viewportOffset: (window.innerHeight / 2),
    // how often to trigger the loading event when scrolling
    throttleTime: 50,
    // defines the time from the last scroll event to trigger the loading event
    debounceTime: 100



  • Fixed height scalling edge case with margin on progressive-media element

You Might Be Interested In:

Leave a Reply