Pure JavaScript Library For Lazy Loading Images – lazyload.js

Category: Javascript , Loading , Recommended | April 27, 2019
Author: verlok
Views Total: 3,380
Official Page: Go to website
Last Update: April 27, 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();

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,

// enables native lazy loading (where supported) with the loading="lazy" attribute
use_native: false,

// callbacks
callback_load: null,
callback_set: null,
callback_set: null,
callback_enter: null

API methods.

// update the LazyLoad
update();

// force loading any element
load()

// load all images
loadAll()

// destroy the LazyLoad
destroy()

Changelog:

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