Progressive Image Loader In Vanilla JavaScript – progressive-images

progressive-images is a vanilla javascript library to progressively and responsively load proper images depending on the current screen size.

How to use it:

Include the necessary style sheet on the webpage.

<link href="progressive-load.css" rel="stylesheet">

Embed your images into the webpage as follows:

<picture class="js-progressive-img">
  <!-- tablet image -->
  <source
      media="(min-width: 600px) and (max-width: 768px)"
      srcset="tablet-thumbnail.jpg"
      data-srcset="tablet.jpg"
  >
  <!-- mobile image -->
  <source
      media="(max-width: 600px)"
      srcset="mobile-thumbnail.jpg"
      data-srcset="mobile.jpg"
  >
  <!-- desktop image -->
  <img
      src="thumbnail.jpg"
      data-srcset="1.jpg"
      class="progressive-img"
  >
</picture>

Include the main JavaScript file ‘global.min.js’ at the bottom of the webpage.

<script src="global.min.js"></script>

Activate the progressive-images library with default settings.

var progresseiveLoadImages = new ProgressiveLoad({
    pictureTagClassName: 'js-progressive-img',
    pictureLoadedClassName: 'progressive-img-state-loaded',
    mediaQueries: ['(max-width: 600px)', '(min-width: 600px) and (max-width: 768px)'],
    fullImageDataAttribute: 'srcset',
});