Progressive Images is a vanilla JavaScript library for progressive and responsive loading of appropriate images depending on the current screen size.

progressive image loading example, progressive image loading javascript, progressive image loading react native, progressive image loading jquery

How to make use of it:

1. Include the necessary style sheet on the web page.

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

2. Include your images in 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>

3. Include the main JavaScript file “global.min.js” at the bottom of the web page.

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

4. Activate the progressive photo library with the 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',
});

Progressive Image Loader, Progressive uploading images to Vanilla Js Plugin/Github

See Demo And Download

Official Website(dudim): Click Here

This superior jQuery/javascript plugin is developed by dudim. For extra advanced usage, please go to the official website.