Pure JavaScript Library For Lazy Loading Images – lazyload.js

Category: Javascript , Loading , Recommended | October 31, 2019
Author: verlok
Views Total: 3,556
Official Page: Go to website
Last Update: October 31, 2019
License: MIT

Preview:

Pure JavaScript Library For Lazy Loading Images – lazyload.js

Description:

lazyload.js is a stand-alone JavaScript library for lazy loading images without any dependencies. It supports the srcset attribute and with and takes best advantage from the progressive JPEG image format.

Basic Usage:

Load the lazyload.js JavaScript library at the end of your document.

<script src="path/to/lazyload.js"></script>

Insert your images into the document using data-original attribute instead of src.

<img alt="Alt 1" data-src="1.jpg" width="200" height="200">
<img alt="Alt 2" data-src="2.jpg" width="200" height="200">
<img alt="Alt 3" data-src="3.jpg" width="200" height="200">
...

Initialize the lazy load functionality on your images with one JS call.

new LazyLoad({/*options*/});

Available options with default values.

// image selector
elements_selector: "img",

// parent container
container: window,

// the distance out of the viewport
threshold: 300,

// different thresholds
thresholds: null,

// data-src
data_src: "src",

// data-srcset
data_srcset: "srcset",

// date-sizes
data_sizes: "sizes",

// multiple background images
data_bg: "bg",

// default classes
class_loading: "loading",
class_loaded: "loaded",
class_error: "error",

// the time (in milliseconds) each image needs to stay inside the viewport before its loading begins.
load_delay: 0,

// whether or not to automatically unobserve elements that was already revealed
auto_unobserve: true

Callback functions.

new LazyLoad({
    callback_enter: function(DOM, IntersectionObserverEntry, instance){
      // do something
    },
    callback_exit: function(DOM, IntersectionObserverEntry, instance){
      // do something
    },
    callback_reveal: function(DOM, instance){
      // do something
    },
    callback_loaded: function(DOM, instance){
      // do something
    },
    callback_error: function(DOM, instance){
      // do something
    },
    callback_finish: function(instance){
      // do something
    }
});

API methods.

// update the LazyLoad
instance.update();

// force loading any element
instance.load(element, force);

// load all images
instance.loadAll();

// destroy the LazyLoad
instance.destroy();

Changelog:

v12.3.0 (10/31/2019)

  • Callbacks now pass more arguments!

v12.2.0 (10/22/2019)

  • Released new feature “retry when back online”. Now if your users lose the internet connection causing errors on images loading, this script tries and loads those images again when the connection is restored.

v12.1.0 (10/07/2019)

  • Updated
  • Added more demos in the zip

v12.0.0 (04/27/2019)

  • Reorganized code
  • Improved native lazy loading demos
  • Aligned console messages throughout all demos.

v12.0.0beta (03/23/2019)

  • Added the use_native option which enables native lazy loading (where supported) with the loading=”lazy” attribute.
  • Refactored the constructor and the update method

v11.0.6 (03/23/2019)

  • Restored the callback_set callback as deprecated, in order to make the upgrade from v.10 easier.

v11.0.5 (03/15/2019)

  • Fixed the module property of this package.json, which was pointing to a non-existing dist file.
  • Fixed the main property of this package.json, which was pointing to a non-existing dist file.
  • Rollback of the patch applied in 11.0.2 since it gave strange results in some cases.

v11.0.2 (03/02/2019)

  • Squashed a nasty bug that occurred on IE 11 and Safari when the IntersectionObserver polyfill wasn’t loaded before LazyLoad.
  • Fixed a Chromium bug.

v11.0.0 (02/24/2019)

  • Changed bundle file name of ES Module from lazyload.es2015.js to lazyload.esm.js
  • Removed the to_webp option
  • Callback callback_enter has changed its meaning! It is now called whenever an element enters the viewport, even if load_delay is set
  • Callback callback_exit (new) is called whenever an element exits the viewport, even if load_delay is set
  • Callback callback_reveal (new) is called when an element is about to be revealed, and its attribute values were copied from the data- attributes to the actual ones.
  • Callback callback_set was removed. You can use callback_reveal instead.
  • Private methods like _setObserver, _onIntersection etc. are now hidden and protected.
  • Added the auto_unobserve boolean option.
  • Bugfix: loadAll() didn’t unobserve elements.

v10.20.0 (02/09/2019)

  • Improved WebP detection to work correctly on Firefox too
  • Added the ability to know when all images have been downloaded through the callback_finish callback
  • Added the file demos/print.html to demo how to print lazy images

09/29/2018

  • v10.18: Added the ability to have multiple background images, through a new data_bg option.-in-javascript

09/13/2018

  • v10.17: Added a new thresholds option that you can use when you need to have different thresholds for the scrolling area, so a single threshold option is not enough for your needs.

08/18/2018

  • v10.16: Added new option load_delay to skip loading when fast scrolling occurs. Pass in a number of milliseconds, and each image will be loaded after it stayed inside that viewport for that time.

08/04/2018

  • v10.13: Shortened the RegEx for crawlers detection

07/21/2018

  • v10.10: Added a public load method to force loading any element.

07/14/2018

  • v10.9: Added the ability to lazily set the sizes attribute via a data-sizes attribute.

06/24/2018

  • v10.8: Added a public loadAll method to force loading all the images

05/31/2018

  • v10.5.2: Added a security check on lazy elements’ parents.

You Might Be Interested In:


Leave a Reply