Effortless Lazy Loading
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.
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.
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>
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.
<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>
<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>
<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>
<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>
Creates a new LazyImage instance.
const lazyImage = new LazyImage(selector);
selector: A CSS selector for the images you want to lazy load.
Initializes the lazy loading functionality based on the browser’s capabilities.
lazyImage.init();
Uses the Intersection Observer API to lazy load images when they enter the viewport.
lazyImage.observeWithIntersectionObserver();
Loads all images immediately if Intersection Observer is not supported.
lazyImage.loadImagesImmediately();
Loads a specific image.
lazyImage.loadImage(image);
image: The HTMLImageElement to load.
Creates a new LazyLoadVideo instance.
const lazyVideo = new LazyLoadVideo(selector);
selector: A CSS selector for the videos you want to lazy load.
Initializes the lazy loading functionality based on the browser’s capabilities.
lazyImage.init();
Uses the Intersection Observer API to lazy load videos when they enter the viewport.
lazyVideo.observeWithIntersectionObserver();
Loads all videos immediately if Intersection Observer is not supported.
lazyVideo.loadVideoElementsImmediately();
Loads a specific video.
lazyVideo.loadVideoElement(element);
element: The HTMLVideoElement to load.
Lazy Load JS is compatible with modern web browsers that support the Intersection Observer API.
Sponsors are welcome: UPI
please drop your github username so we can mention you correctly. reach out at gyan@epiction.co
Lazy Load JS is licensed under the MIT License