Accelerate Web Pages With Easy-Lazy’s Image Lazy Loading

Preview:

Description:

easy-lazy is a lightweight JavaScript library to optimize image loading by delaying the loading process until images are about to enter the viewport.

It can minimize initial page load times and reduce the strain on your server, particularly on pages with numerous images. This results in faster page rendering, a more responsive user interface, and a smoother browsing experience for your visitors.

How it works:

easy-lazy creates a LazyLoad class to handle lazy loading of images. The class constructor accepts a selector and an options object to configure the lazy loading behavior.

Upon initialization, the library sets placeholders for the images if specified. It then determines whether to use the IntersectionObserver API or the scroll event listener for lazy loading based on the user’s configuration.

If the IntersectionObserver API is used, it observes each image element and triggers the loading process when the element intersects with the viewport. Otherwise, the library listens for the scroll event and checks the position of each image element relative to the viewport.

When an image element needs to be loaded, the loadElement function is called. It creates a new Image object with the actual image source and sets the src attribute of the element once the image has loaded successfully. If responsive images are enabled, the library also sets the srcset and sizes attributes accordingly.

How to use it:

1. Install & download with NPM:

npm install easy-lazy-load-image

2. Import the easy-lazy library into your web project:

<script src="/index.js"></script>

3. Add the class “lazy” to the images you want to lazy load. The data-src attribute holds the actual image source:

<img data-src="1.jpg" class="lazy" />

4. Override the default options to customize the lazy loading behavior.

• threshold=300 – The distance in pixels before the viewport to start loading the images.
• callback=null – A callback function to execute after each image is loaded.
• animation=’fade’ – The type of animation to use when loading images.
• delay=500 – The delay in milliseconds before checking the position of images.
• placeholder=null – A placeholder image source to display before the actual image loads.
• errorImage=null – An image source to display if the actual image fails to load.
• useIntersectionObserver=false – Whether to use the IntersectionObserver API for lazy loading.
• responsive=false – Whether to support responsive images using srcset and sizes attributes.

document.addEventListener('DOMContentLoaded', function() {
  new LazyLoad('body', {
      threshold: 200,
      animation: 'fade',
      callback: (element) => console.log(`Loaded: ${element.src}`),
      delay: 300,
      placeholder: 'placeholder.jpg',
      errorImage: 'error.jpg',
      useIntersectionObserver: true,
      responsive: true
  });
});