Lazy loading

Small and simple JS API, developed to easily the application of the Lazy Loading tecnique to images, in order to optimize website pages.

Index

• Usage
  • Import the API
  • Set the properties
  • Choose a class
  • Start the API
• API Methods
  • Constructor
  • start
  • disconnectFromObserver
• Incompatibility browsers

Usage

Import the API

Import the API in your HTML code:

<script src="https://cdn.jsdelivr.net/npm/@duckafire/[email protected]/dist/LazyLoadingImage.min.js"></script>

Or download the file(s), from here.

Set the properties

Choose which img will use the API, then set the properties below:

• data-src: contains the original image - high quality. It will be used when the img is visible.

• data-placeholder: contains an low quality image that will be used when image is not visible. Used for avoid the breaking of the page layout.

<img data-src="./foo.png" data-placeholder="./foo-placeholder.png"/>

Choose a class

Attribute a specific class to all elements whose visibility will be controlled by the API.

<img class="foo" data-src="./foo.png" data-placeholder="./foo-placeholder.png"/>

Start the API

Instance a object using the class (choosed in the last step) as first argument and enjoy!

<img class="foo" data-src="./foo.png" data-placeholder="./foo-placeholder.png"/>

<script>
	new LazyLoadingImage(".foo");

	// OR:
	// const api_unit = new LazyLoadingImage(".foo");
</script>

API methods

Constructor

Instance the object and it validate the HTML elements that were obtained by the query specificed.

Parameters	Type	Default	Description
query	string	undefined	CSS query to get specific HTML elements.
startWarning	boolean	false	it allows console warning and error messages.
awaitToStart	boolean	false	set that the API will be started manually.

Important

Parameters that have undefined as default value they are mandatory.

Exceptions

• None element was found with the specified query.
• Element type (img, div, ...) invalid - only img is allow.

Console

Warnings

• All start warnings.

Errors

• All start errors.

start

Used to start the API manually.

Parameters	Type	Default	Description
warning	boolean	false	it allows console warning and error messages.

Exceptions

• None.

Console

Warnings

• The API already was started.

Errors

• The browser do not have support to Intersection Observer API (API from JS standard, use as base to this project).

disconnectFromObserver

Used to end API work.

Note

This method is declared inside #connectToObserver (private method).

Parameters	Type	Default	Description
None

Exceptions

• None.

Console

Warnings

• None.

Errors

• None.

Incompatibility browsers

This API is based in other API, from JS Standard, named Intersection Observer API. If the user's browser do not have support to this Standard API, the data-src image will load without lazy loading.