Responsive Image Lazy Load JS Library – lazysizes

Category: Javascript , Loading , Recommended | December 21, 2018
Author:
Views Total: 3,244
Official Page: Go to website
Last Update: December 21, 2018
License: MIT

Preview:

Responsive Image Lazy Load JS Library – lazysizes

Description:

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.

<img
    data-sizes="auto"
    src="low-quality-src.jpg"
    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 readme.md in the zip.

Changelog:

v4.1.5 (2018-12-21)

  • Update and bugfix

You Might Be Interested In:


Leave a Reply