Lazy Load JS

Version: 1.2.1

Lazy Load JS is a lightweight JavaScript library designed to enhance web page performance by implementing lazy loading for both images and videos. Images and videos are loaded only when they are about to become visible in the user’s viewport, reducing initial page load times and saving bandwidth.

Table of Contents

1. Introduction
2. Installation
3. Getting Started
   • Basic Usage
   • Advanced Configuration
4. API Reference
   • LazyLoadImage Class
     • Constructor
     • init()
     • observeWithIntersectionObserver()
     • loadImageElementsImmediately()
     • loadImageElement()
   • LazyLoadVideo Class
     • Constructor
     • init()
     • observeWithIntersectionObserver()
     • loadVideoElementsImmediately()
     • loadVideoElement()
5. Examples
6. Browser Support
7. Contributing
8. License

Introduction

Lazy Load JS aims to simplify the implementation of lazy loading for images and videos on websites. By deferring the loading of media elements until they are needed, the library contributes to a smoother user experience and faster page loads.

Installation

You can include Lazy Load JS in your project using the following script tag:

<!--  For Images  -->

  <script src="https://cdn.jsdelivr.net/gh/gyanprabhat7/LazyLoad.JS/lazyImage.js"></script>

<!--  For Videos  -->

  <script src="https://cdn.jsdelivr.net/gh/gyanprabhat7/LazyLoad.JS/lazyVideo.js"></script>

Getting Started

Basic Usage

Lazy Load JS can be easily integrated into your web page. Simply add the lazy-load-image and/or lazy-load-video class to the images and videos you want to lazy load, and include the respective library in your script.

Lazy Load Images

<img src="placeholder.jpg" data-src="image-to-lazy-load.jpg" class="lazy-load-image" alt="Lazy-loaded Image">

<script src="https://cdn.jsdelivr.net/gh/gyanprabhat7/LazyLoad.JS/lazyimage.js"></script>
<script>
    const lazyImage = new LazyLoadImage('.lazy-load-image');
    lazyImage.init();
</script>

Lazy Load Videos

<video data-src="video-to-lazy-load.mp4" class="lazy-load-video" controls>
    Your browser does not support the video tag.
</video>

<script src="https://cdn.jsdelivr.net/gh/gyanprabhat7/LazyLoad.JS/lazyvideo.js"></script>
<script>
    const lazyVideo = new LazyLoadVideo('.lazy-load-video');
    lazyVideo.init();
</script>

Advanced Configuration

Lazy Load Images

<script src="https://cdn.jsdelivr.net/gh/gyanprabhat7/LazyLoad.JS/lazyimage.js"></script>
<script>
    const lazyImage = new LazyLoadImage('.lazy-load-image');

    // Customize the loading strategy
    lazyImage.observeWithIntersectionObserver();

    // Optional: Provide a placeholder image
    lazyImage.placeholderImage = 'placeholder.jpg';

    lazyImage.init();
</script>

Lazy Load Videos

<script src="https://cdn.jsdelivr.net/gh/gyanprabhat7/LazyLoad.JS/lazyLoadVideo.js"></script>
<script>
    const lazyVideo = new LazyLoadVideo('.lazy-load-video');

    // Customize the loading strategy
    lazyVideo.observeWithIntersectionObserver();

    // Optional: Provide a placeholder video
    lazyVideo.placeholderVideo = 'placeholder.mp4';

    lazyVideo.init();
</script>

API Reference

LazyImage Class

Constructor

Creates a new LazyImage instance.

const lazyImage = new LazyImage(selector);

selector: A CSS selector for the images you want to lazy load.

init()

Initializes the lazy loading functionality based on the browser’s capabilities.

lazyImage.init();

observeWithIntersectionObserver()

Uses the Intersection Observer API to lazy load images when they enter the viewport.

lazyImage.observeWithIntersectionObserver();

loadImagesImmediately()

Loads all images immediately if Intersection Observer is not supported.

lazyImage.loadImagesImmediately();

loadImage(image)

Loads a specific image.

lazyImage.loadImage(image);
image: The HTMLImageElement to load.

LazyVideo Class

Constructor

Creates a new LazyLoadVideo instance.

const lazyVideo = new LazyLoadVideo(selector);

selector: A CSS selector for the videos you want to lazy load.

init()

Initializes the lazy loading functionality based on the browser’s capabilities.

lazyImage.init();

observeWithIntersectionObserver()

Uses the Intersection Observer API to lazy load videos when they enter the viewport.

lazyVideo.observeWithIntersectionObserver();

loadVideoElementsImmediately()

Loads all videos immediately if Intersection Observer is not supported.

lazyVideo.loadVideoElementsImmediately();

loadVideoElement(element)

Loads a specific video.

lazyVideo.loadVideoElement(element);

element: The HTMLVideoElement to load.

Browser Support

Lazy Load JS is compatible with modern web browsers that support the Intersection Observer API.

Sponor

Sponsors are welcome: UPI

please drop your github username so we can mention you correctly. reach out at gyan@epiction.co

License

Lazy Load JS is licensed under the MIT License