Version 17.2

17.2.0

Rolling back the "data attribute cleanup" feature that was released on 16.1.0 and was causing issues like #484 when more than one instance of LazyLoad were working on the same elements of the page - the script is also 500 bytes lighter now

Version 17.1

17.1.3

• Added missing types (#480), thanks to @ar53n (#482)

17.1.2

• Fixed TypeScript typings (#475), thanks to @ar53n (#477)

17.1.1

• Fixed npm audit vulnerabilities

17.1.0

• Unobserve all elements on loadAll() call. It's better for performance, and it solves #469.
• Added some hidden images in the load_all.html demo

Version 17.0

17.0.1

• Bug fix: callback_exit() was not being called on non-image elements (#468).

17.0.0

• The elements_selector option now defaults to .lazy (was img)
• The cancel_on_exit option now defaults to true (was false)

See UPGRADE.md to understand if you are impacted by any breaking change and how to upgrade from previous versions.

Version 16.1

16.1.0

Improved speed, cleaning DOM, better working destroy, and also fixed 2 bugs.

• Cleaning up data attributes from the DOM when finished using them (mainly when elements have finished loading)
• Improved destroy method, which now also removes lazyload's additions to the DOM elements
• Video elements are now only listening to the loadeddata event, no longer to load
• Removed constants containing strings. I thought it would produced shorter minified code, but discovered that terser expands them to strings.
• Bugfix: when lazily loading videos, the error _poster_ is undefined was thrown
• Bugfix: when selecting native lazy loading, the loading class was added without knowing whether or not the loading had started

Version 16.0

16.0.0

Functional changes:

• Removed call to deprecated callback_reveal
• Removed deprecated instance load() method in favor of the static LazyLoad.load() method
• Replaced auto_unobserve with unobserve_completed, still defaulting to true
• Introduced a new unobserve_entered option (useful to execute lazy functions once)
• Created a demo called lazy_functions.html to show how to execute functions as elements enter the viewport
• Wrote a new recipe to facilitate the lazy execution of scripts/functions
• Renamed instance method resetElementStatus() to the static LazyLoad.resetStatus()
• Removed the load_delay option since there's no more use for it
• Removed the load_delay related demos

See UPGRADE.md to understand if you are impacted by any breaking change and how to upgrade from previous versions.

Internal changes:

• Simplified management of the cancel_on_exit with less increase/decrease of the toLoadCount property
• Refactored counters functions in a new lazyload.counters file

---

Love this project? 😍 Buy me a coffee!

Version 15.2

15.2.0

OPTIMIZE FOR SLOW CONNECTIONS WITH cancel_on_exit

Want to optimize speed for users who scroll down fast on a slow connection? Just set cancel_on_exit: true and LazyLoad will cancel the download of images exiting the viewport while still loading, eventually restoring the original attributes.

• Introduced the new cancel_on_exit option.
• Introduced the callback_cancel option, just in case you want to perform any additional action whenever a download gets canceled by cancel_on_exit.
• Created a new demo named cancel_on_exit.html so you can try the new cancel_on_exit option live.
• Set cancel_on_exit to true in the following demos, so you can test how it behaves...
  • image_ph_inline.html, with an inline SVG placeholder
  • image_ph_external.html, with an external SVG placeholder
  • delay_test.html, in conjuction with the delay_load option
  • fade_in.html, with a beautiful fade-in effect.

The cancel_on_exit option applies only to images so to the img (and picture) tags. It doesn't work for background images, iframes nor videos.

The cancel_on_exit option will probably default to true starting from the next major version, so give it a try! And please report your feedback in the comments of #438.

API

• Added the resetElementStatus() method for when you need to tell LazyLoad to consider an image (or other DOM element) again. This is particularly useful if you change the data-src attribute after the previous data-src was loaded). See the API section in the README file for more information.

FIX

• The callback_exit callback was called several times (for every images out of the viewport) at instance creation or upon update() calls. Now the callback is properly called only when any element exits the viewport.

INTERNALS

• Improved script performance by reducing the number of event listeners used for loading elements.
• Changed the values that the (internally used) data-ll-status attribute can take. Removed the status "observed" (it was useless) and introduced status "delayed".

---

Love this project? 😍 Buy me a coffee!

Version 15.1

15.1.1

Fixed a bug when loading lazy background images on HiDPI screens, data-bg-hidpi was mandatory, not it fallbacks to data-bg. #430

15.1.0

Lazy background images just gained support for hiDPI ("retina") screens!
Place your standard resolution images in the data-bg attribute and your hiDPI images in data-bg-hidpi.
Same for data-bg-multi and data-bg-multi-hidpi.

---

Love this project? 😍 Buy me a coffee!

Version 15.0

15.0.0

Lazy background images gained loaded/error classes and callbacks! 🎉

Breaking changes impacting lazy background images! ⚠ See UPGRADE.md to understand if you are impacted and how to upgrade from previous versions.

• Lazy loading of one background image using the data-bg attribute, now manages the load and error events, so they are applied the classes defined in the class_loading/class_loaded/class_error, and the callbacks defined in callback_loading/callback_loaded/callback_error.
• Lazy loading of multiple background images is still possible via the data-bg-multi attribute. In this case, the load and error events are not managed. The class_applied and callback_applied can be used to understand when the multiple background was applied to the element.
• Updated background images demos:
  • background-images.html -> single background images
  • background-images-multi.html -> multiple background images
• Added UPGRADE.md, a guide on how to upgrade from previous versions (from version 12 up)

---

Love this project? 😍 Buy me a coffee!

Version 14.0

14.0.1

• Fixed error TS1036: Statements are not allowed in ambient contexts. Closes #427

14.0.0

🎉 Major refactoring and performance improvement!
🔍 File size stays tiny: only 2.07 KB gZipped

Settings

• callback_loading is called when an element started loading
• callback_reveal is now ⚠ DEPRECATED, use callback_loading instead (it's the same thing, it was just renamed). callback_reveal will be removed and will stop working in version 15.

Instance methods

• update() method now also unobserves deleted elements, instead of just looking for and observing new elements
• destroy() destroys better than it did before, delete-ing properties instead of setting their values to null
• load() method (as an instance method) is now ⚠ DEPRECATED, use the static method instead. If you were using aLazyLoadInstance.load(element) you should change it to LazyLoad.load(element, settings).

Static methods

• load() was added as a static method. Note that if you need to use custom settings, you need to pass them in the settings parameter.

Instance properties

• Added toLoadCount. It's the counter of the elements that haven't been lazyloaded yet.

DOM

• Removed the data-was-processed attribute, that was added to mark lazy DOM elements as "already managed". If you were manually handling that attribute to obtain some goal, this is a potentially breaking change. You should now refer to the data-ll-status instead.
• Added the data-ll-status attribute, which is now used to mark the status of a lazy DOM element. The values it can take are: observing (not loaded yet), loading (loading started), loaded (load completed), error (an error has occured), native (similar to observing, but managed by native lazy loading).

---

Love this project? 😍 Buy me a coffee!

Version 13.0

13.0.1

• Fixed a JS error that could happen to IE11 users after going offline and back online
• Minor refactoring for better readibility and lighter code (and files)!

13.0.0

• Added the minified version of dist/lazyload.esm.js as dist/lazyload.esm.min.js, so now you can effortlessly use it with an ES module import statement when using type="module"
• Reduced files weight even more! dist/lazyload.iife.min.js now weights only 2.03 KB GZipped
• Removed the callback_set callback that was deprecated since version 11 in favour of callback_reveal
• Removed sourcemaps (they were probably used only by the authors, but if anyone was actually needing them, we can bring them back)
• Hidden the _extends function inside LazyLoad's scope (it was global before)
• Updated build tooling: removed Gulp, now using Rollup & Babel only