https://github.com/oguzhan18/easy-lazy
LazyLoad is a lightweight JavaScript library for lazy loading images with various customization options. It improves performance by loading images only when they are about to enter the viewport.
https://github.com/oguzhan18/easy-lazy
image-lazyload javascript javascript-library lazyload lazyload-images library load-testing
Last synced: 11 months ago
JSON representation
LazyLoad is a lightweight JavaScript library for lazy loading images with various customization options. It improves performance by loading images only when they are about to enter the viewport.
- Host: GitHub
- URL: https://github.com/oguzhan18/easy-lazy
- Owner: oguzhan18
- Created: 2024-05-20T18:25:23.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-05-20T20:34:01.000Z (about 2 years ago)
- Last Synced: 2025-05-13T10:43:58.941Z (about 1 year ago)
- Topics: image-lazyload, javascript, javascript-library, lazyload, lazyload-images, library, load-testing
- Language: JavaScript
- Homepage: https://easy-lazy.vercel.app
- Size: 275 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Easy Lazy Load Image
LazyLoad is a lightweight JavaScript library for lazy loading images with various customization options. It improves
performance by loading images only when they are about to enter the viewport.
## Installation
You can install LazyLoad using npm:
```bash
npm install easy-lazy-load-image
```
or
```html
```
## Usage
To use LazyLoad, create a new instance of the class and pass the CSS selector of the container holding the images along
with any desired options.
### Basic Example
```html
LazyLoad Example
#image {
display: flex;
flex-direction: column;
align-items: center;
}
ul {
list-style-type: none;
}
li {
width: 550px;
height: 310px;
margin: 10px;
align-items: center;
background-color: gray;
border: 1px solid black;
}
img {
width: 100%;
}
![Image 1]()
![Image 2]()
document.addEventListener('DOMContentLoaded', function () {
new LazyLoad('#image-container', {
threshold: 200,
animation: 'fade',
callback: (element) => console.log(`Loaded: ${element.src}`),
delay: 300,
placeholder: 'placeholder.jpg',
errorImage: 'error.jpg',
useIntersectionObserver: true,
responsive: true
});
});
```
## Options
1. `selector`: The CSS selector to target elements for lazy loading. This is a required parameter.
2. `threshold`: The distance in pixels from the viewport that triggers the loading of an image. The default value is
300.
3. `root`: The element that is used as the viewport for checking visibility of the target elements. The default value is
the browser viewport.
4. `callback`: A callback function to execute after each image is loaded. Default is `null`.
5. `animation`: The type of animation to use when loading images. Default is `fade`.
6. `animationDuration`: The duration of the animation in milliseconds. Default is `500`.
7. `delay`: The delay in milliseconds before loading an image. Default is `500`.
8. `placeholder`: The URL of the placeholder image to use while the target image is loading. Default is `null`.
9. `errorPlaceholder`: The URL of the placeholder image to use if the target image fails to load. Default is `null`.
10. `useIntersectionObserver`: A boolean value indicating whether to use the Intersection Observer API. Default
is `false`.
11. `responsive`: Whether to support responsive images using `srcset` and sizes attributes. Default is `false`.
## Methods
### Constructor
Creates an instance of LazyLoad.
```javascript
new LazyLoad(selector, options);
```
* `selector` (string): The CSS selector to target elements for lazy loading.
* `options` (object): An object containing customization options.
### Example
```javascript
new LazyLoad('#image-container', {
threshold: 200,
animation: 'fade',
callback: (element) => console.log(`Loaded: ${element.src}`),
delay: 300,
placeholder: 'placeholder.jpg',
errorImage: 'error.jpg',
useIntersectionObserver: true,
responsive: true
});
```