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:

• 10 Best Lazy Loading JavaScript Libraries

How to use it:

Install & download the ProgressiveMedia with NPM:

# 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">
          <noscript>
              <img src="images/01.jpeg"
                   class="progressive-media-image-original progressive-media-content">
          </noscript>
      </div>
  </div>
</div>

<div class="progressive-media progressive-media-iframe progressive-media-unloaded" style="max-width: 500px; max-height: 408px;" data-src="https://www.facebook.com/plugins/page.php?href=https://www.facebook.com/instagram/&tabs=timeline&width=500&height=408&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId">
  <div class="progressive-media-aspect" style="padding-bottom: 81.6%;">
      <div class="progressive-media-aspect-inner">
          <noscript>
              <iframe src="https://www.facebook.com/plugins/page.php?href=https://www.facebook.com/instagram/&tabs=timeline&width=500&height=408&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" class="progressive-media-content"></iframe>
          </noscript>
      </div>
  </div>
</div>

Initialize the ProgressiveMedia library and done.

progressiveMedia.loadProgressiveMedia();

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
    
};

Changelog:

02/27/2019

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