Responsive Image Lazy Load JS Library – lazysizes

Category: Javascript , Loading , Recommended | December 18, 2019
Author: aFarkas
Views Total: 3,785
Official Page: Go to website
Last Update: December 18, 2019
License: MIT


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.0 (2019-12-18)

  • Update and bugfix

You Might Be Interested In:

Leave a Reply