Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/modularorg/modularload
□ Dead simple page transitions and lazy loading.
https://github.com/modularorg/modularload
fetch javascript lazy-loading page-transitions pjax pushstate
Last synced: 3 days ago
JSON representation
□ Dead simple page transitions and lazy loading.
- Host: GitHub
- URL: https://github.com/modularorg/modularload
- Owner: modularorg
- License: mit
- Created: 2019-03-03T19:36:43.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2021-08-24T18:45:47.000Z (over 3 years ago)
- Last Synced: 2024-12-10T12:04:05.866Z (12 days ago)
- Topics: fetch, javascript, lazy-loading, page-transitions, pjax, pushstate
- Language: JavaScript
- Homepage:
- Size: 34.2 KB
- Stars: 125
- Watchers: 6
- Forks: 12
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
modularLoad
Dead simple page transitions and lazy loading.
## Installation
```sh
npm install modularload
```
## Why
- Simple
- Lightweight
- Minimal configuration
- No dependencies
## Usage
```js
import modularLoad from 'modularload';
this.load = new modularLoad({
enterDelay: 300
});
```
```html
```
#### With custom transitions
```js
import modularLoad from 'modularload';
this.load = new modularLoad({
enterDelay: 300,
transitions: {
transitionName: {
enterDelay: 450
},
transitionTwoName: {
enterDelay: 600
}
}
});
```
```html
```
#### With custom container
```js
import modularLoad from 'modularload';
this.load = new modularLoad({
enterDelay: 600,
transitions: {
article: {
enterDelay: 300
}
}
});
```
```html
```
#### With lazy images
```js
import modularLoad from 'modularload';
this.load = new modularLoad();
```
```html
```
#### With events
```js
import modularLoad from 'modularload';
this.load = new modularLoad();
this.load.on('loaded', (transition, oldContainer, newContainer) => {
console.log('👌');
if (transition == 'transitionName') {
console.log('🤙');
}
});
```
#### With methods
```js
import modularLoad from 'modularload';
this.load = new modularLoad();
this.load.goTo('/page', 'transitionName');
```
## Options
| Option | Type | Default | Description |
| ------ | ---- | ------- | ----------- |
| `name` | `string` | `'load'` | Data attributes name |
| `loadingClass` | `string` | `'is-loading'` | Class when a link is clicked. |
| `loadedClass` | `string` | `'is-loaded'` | Class when the new container enters. |
| `readyClass` | `string` | `'is-ready'` | Class when the old container exits. |
| `transitionsPrefix` | `string` | `'is-'` | Custom transitions class prefix. |
| `transitionsHistory` | `boolean` | `true` | Redo the custom transitions while using the back button. |
| `enterDelay` | `number` | `0` | Minimum delay before the new container enters. |
| `exitDelay` | `number` | `0` | Delay before the old container exists after the new enters. |
| `loadedDelay` | `number` | `0` | Delay before adding the loaded class. For example, to wait for your JS DOM updates. |
| `transitions` | `object` | `{}` | Custom transitions options. |
## Attributes
| Attribute | Values | Description |
| --------- | ------ | ----------- |
| `data-load-container` | ` `, `string` | Container you want to load with optional string. |
| `data-load` | `string`, `false` | Transition name or disable transition. |
| `data-load-url` | `boolean` | Update url without loading container. |
| `data-load-src` | `string` | Lazy load src attribute. |
| `data-load-srcset` | `string` | Lazy load srcset attribute. |
| `data-load-style` | `string` | Lazy load style attribute. |
| `data-load-href` | `string` | Lazy load href attribute. |
## Events
| Event | Arguments | Description |
| ----- | --------- | ----------- |
| `loading` | `transition`, `oldContainer` | On link click. |
| `loaded` | `transition`, `oldContainer`, `newContainer` | On new container enter. |
| `ready` | `transition`, `newContainer` | On old container exit. |
| `images` | | On all images load. |
## Methods
| Method | Description |
| ------ | ----------- |
| `goTo('href'[, 'transition'][, true])` | Go to href. With optional transition name and boolean for url update only. |