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.