|Official Page:||Go to website|
|Last Update:||April 27, 2019|
srcset attribute and with and takes best advantage from the progressive JPEG image format.
Insert your images into the document using
data-original attribute instead of
<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.
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
// update the LazyLoad update(); // force loading any element load() // load all images loadAll() // destroy the LazyLoad destroy()
- Reorganized code
- Improved native lazy loading demos
- Aligned console messages throughout all demos.
- Added the use_native option which enables native lazy loading (where supported) with the loading=”lazy” attribute.
- Refactored the constructor and the update method
- Restored the callback_set callback as deprecated, in order to make the upgrade from v.10 easier.
- 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.
- Squashed a nasty bug that occurred on IE 11 and Safari when the IntersectionObserver polyfill wasn’t loaded before LazyLoad.
- Fixed a Chromium bug.
- 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.
- 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
- 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.
- 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.
- v10.13: Shortened the RegEx for crawlers detection
- v10.10: Added a public load method to force loading any element.
- v10.9: Added the ability to lazily set the sizes attribute via a data-sizes attribute.
- v10.8: Added a public loadAll method to force loading all the images
- v10.5.2: Added a security check on lazy elements’ parents.