Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thomasdev-de/query-lazy
A simple jQuery plugin to load elements only when they are needed during scrolling.
https://github.com/thomasdev-de/query-lazy
customization javascript jquery lazy lazy-loading
Last synced: 6 days ago
JSON representation
A simple jQuery plugin to load elements only when they are needed during scrolling.
- Host: GitHub
- URL: https://github.com/thomasdev-de/query-lazy
- Owner: ThomasDev-de
- Created: 2023-11-03T11:16:41.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-10T21:03:24.000Z (about 1 year ago)
- Last Synced: 2024-11-17T04:12:21.139Z (2 months ago)
- Topics: customization, javascript, jquery, lazy, lazy-loading
- Homepage:
- Size: 770 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# query-lazy
A simple jQuery plugin to load elements only when they are needed during scrolling.
## Introduction
Set the attribute `[data-lazy-src]` to an image so that the plugin knows which image should be loaded. It can also be
set to other elements to load the background image for the parent element.
If the `[data-lazy-url]` attribute is set to an element, the content is fetched using ajax.
Make sure that the elements that are loaded via the plugin have a minimum height;
otherwise it can happen that all elements are loaded at once.
For example like this:
```css
.lazy-waiting {
display: block;
visibility: hidden;
min-height: 300px;
}
```
The plugin provides you with 4 classes to handle this.
1. `lazy-waiting` This class receives every element that is initialized via the plugin.
2. `lazy-loading` This class is assigned to each element via which the plugin is requested to load.
3. `lazy-done` This class is set on every element that has finished loading.
Another example:
```css
body.lazy-done {
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
```
## Installation
1. Download the plugin [uncompressed](./dist/jquery-lazy.js), [minified](./dist/jquery-lazy.min.js)
2. Or load the plugin via composer
```shell
composer require webcito/query-lazy:dev-main
```
3. Include the plugin in your project at the end of the body tag. Make sure that jQuery is loaded first.
```html
```
## Usage
Set the attribute `[data-lazy-{src,url}]` to all elements that should be loaded lazy.
```html
![]()
```
Initialize the plugin
```js
$('[data-lazy-src], [data-lazy-url]').lazy(options);
```
## Options
| name | type | default | description |
|--------------|------------|----------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------|
| recursive | `bool` | `true` | If the value is `true`, additional lazy elements are searched for and initialized in elements that are loaded via ajax (data-lazy-url). |
| classStatic | `string` | `'lazy'` | The class is set for each element and is not changed further. |
| classWaiting | `string` | `'lazy-waiting'` | This class receives every element that is initialized via the plugin. |
| classLoading | `string` | `'lazy-loading'` | This class is assigned to each element via which the plugin is requested to load. |
| classDone | `string` | `'lazy-done'` | This class is set on every element that has finished loading. |
| onBeforeLoad | `function` | `(element) => {}` | The function is triggered before an element receives its content. |
| onLoad | `function` | `(element, width, height, scrollY, scrollX) => {}` | The function is triggered when an element has received its content. |
| onError | `function` | `(element) => {}` | The function is triggered if an element could not receive its content. |
| onCompleted | `function` | `() => {}` | The function is triggered once all elements have received their content. |
## Events
| name | params | description |
|-------------------|------------------------------------|-----------------------------------------------|
| `beforeLoad.lazy` | e | Fires on every element before it is loaded |
| `loaded.lazy` | e, width, height, scrollY, scrollX | Fires on any element after it has been loaded |
## Further information
After an element has been loaded, the attributes `data-lazy-src` and `data-lazy-url` are removed from the element.