LazyLoading.js

This project is a no-dependence library that aims to available simple and light implementations of the Lazy Loading technique to improve the optimization of specific elements, objects, and/or components from FrontEnd WEB pages. Currently, it supports:

• Images (<img/>).

<!-- CDN (jsDelivr) URL -->
<script src="https://cdn.jsdelivr.net/npm/@duckafire/lazy-loading-js@3/dist/lazy-loading.min.js"></script>

Important

If IntersectionObserver (core of this project) is not available in the client's browser, nothing fallback observer algorithm will be implemented and the high quality image will be attributed to src. See more about the availability of this class [here][caniuse-int-ob].

Note

This project is a fork from gyanprabhat7/LazyLoad.JS.

Index

• LazyLoadingImages
  • Element attributes
  • Methods
    • isApiAvailable
    • isStarted
    • startToObserve

Important

To improve the understanding of this documentation, types was added to

LazyLoadingImages

---

• constructor(query: string, [options: ILLImagesOptions])
  • query: query selector used to catch target elements.
  • options: set of options to customize API behavior.

Options	Default	Description
waitToStart: boolean	false	it defines API do not have to be started after to create the object.
styleClasses: IStyleClasses	{}	set of lists of CSS classes they have to be added/removed to/from the catched elements when the show/hide event occur.
observerOptions: IIOOptions	{}	options to IntersectionObserver constructor. See this to get more information about.
useSrcAsFallbackToLazySrc: boolean	true	if true, it defines src content is the lazy quality image if data-lazy is undefined, else it defines src content is the high quality image if data-high is undefined.

---

Element attributes

• data-high: path of the high quality image. It is optional if options.useSrcAsFallbackToLazySrc === false.

• data-lazy: path of the lazy quality image. It is optional if options.useSrcAsFallbackToLazySrc === true.

• data-style-high (optional): comman-separated list formed of CSS styles they will be given to the catched elements when the show/hide event occur.

• data-style-lazy (optional): comman-separated list formed of CSS styles they will be given to the catched elements when the show/hide event occur.

Methods

isApiAvailable

• isApiAvailable(): boolean

• Behavior: verify if the API is available.

• Return: result, in boolean.

---

isStarted

• isStarted(): boolean

• Behavior: verify if the API algorithm was started.

• Return: result, in boolean.

---

startToObserve

• startToObserve(): void

• Behavior: start the API algorithm.

• Return: none.

Note

It prints a warning in the console, if API is already started.

---