Responsive Image Lazy Load JS Library – lazysizes

Category: Javascript , Loading , Recommended | May 27, 2020
Views Total:1,011 views
Official Page:Go to website
Last Update:May 27, 2020


Responsive Image Lazy Load JS Library – lazysizes


lazysizes is an easy yet robust JS library used to delay the loading of images (iframes, scripts, etc) until they come into view, as well as loading the appropriate sources according to the breakpoints defined in the markup to fit any screen size.

Designed for high-performance websites to improve the page load time and to save the bandwidth.

Basic Usage:

Load the lazysizes.js script in your document.

<script src="lazysizes.js" async></script>

Load the respimage.js for responsive images polyfill to load your images fast and responsibly (OPTIONAL).

<script src="respimage.min.js" async></script>

Insert a low quality image with the essential CSS class ‘lazyload’ into your document. Use Html5 data-src attribute to specify the normal/high quality image source.

<img src="low-quality-src.jpg" data-src="normal-quality-src.jpg" class="lazyload">

Integration with respimage.js.

    data-srcset="image1.jpg 100w,
    image2.jpg 300w,
    image3.jpg 600w,
    image4.jpg 900w" class="lazyload">

Done. The JS library will take care of the rest.

All possible options.

  lazyClass: 'lazyload',
  loadedClass: 'lazyloaded',
  loadingClass: 'lazyloading',
  preloadClass: 'lazypreload',
  errorClass: 'lazyerror',
  //strictClass: 'lazystrict',
  autosizesClass: 'lazyautosizes',
  srcAttr: 'data-src',
  srcsetAttr: 'data-srcset',
  sizesAttr: 'data-sizes',
  //preloadAfterLoad: false,
  minSize: 40,
  customMedia: {},
  init: true,
  expFactor: 1.5,
  hFac: 0.8,
  loadMode: 2,
  loadHidden: true,
  ricTimeout: 0,
  throttleDelay: 125,

For more advanced usages, check out the in the zip.


v5.2.2 (2020-05-27)

  • Updated plugins

v5.2.1 (2020-05-26)

  • BlurUp-Plugin: Copy style attribute
  • Fixes minor security issue with video-embed plugin
  • Built: Update dependencies
  • Fixes diverse issues with old AMD module pattern

v5.2.0 (2019-12-18)

  • Update and bugfix

You Might Be Interested In:

Leave a Reply