https://github.com/mawrkus/champoo
🍻 Lazy loading pretty much everything!
https://github.com/mawrkus/champoo
lazy-loading lazyload lazyload-images
Last synced: about 2 months ago
JSON representation
🍻 Lazy loading pretty much everything!
- Host: GitHub
- URL: https://github.com/mawrkus/champoo
- Owner: mawrkus
- Created: 2017-09-06T03:02:49.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-03-09T21:56:25.000Z (about 7 years ago)
- Last Synced: 2025-01-12T11:46:26.734Z (4 months ago)
- Topics: lazy-loading, lazyload, lazyload-images
- Language: JavaScript
- Homepage:
- Size: 78.1 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Champoo
[](https://www.npmjs.org/package/champoo)
Champoo is a lazy loader library.
By separating conditioners & loaders, it gives you the flexibility to easily load pretty much everything, the *lazy way*... It is extensible & has a small footprint.
## Installation
### Node
```bash
yarn add champoo
```
or
```bash
npm install champoo
```
### Browser
The package is available as a UMD module: compatible with AMD, CommonJS and exposing a global variable `Champoo` in `lib/Champoo.js` (less than 1Kb minified and gzipped).
## Usage
```html
![]()
![]()
```
```js
import Champoo from '../es/Champoo';
import { UrlLoader } from '../es/loaders';
import { TimeoutConditioner, ViewportConditioner, MousePointerConditioner } from '../es/conditioners';
import FaceBookCommentsLoader from './FaceBookCommentsLoader';
const champoo = new Champoo({
conditioners: {
timeout: new TimeoutConditioner(),
viewport: new ViewportConditioner(),
pointer: new MousePointerConditioner()
},
loaders: {
'url': new UrlLoader(),
'fb-comments': new FaceBookCommentsLoader()
}
});
champoo.init().then((r) => {
console.log('All lazy elements loaded.', r);
});
```
## Demo
```bash
git clone https://github.com/mawrkus/champoo.git
cd champoo
npm install
npm run server:demo
```
## Custom conditioners creation
A conditioner is a simple class having the following interface:
```js
class AmazingConditioner {
/**
* @param {HtmlElement} element
* @param {Array} params The conditioner parameters declared on the HTML element
* @return {Promise}
*/
check({ element, params }) {
return new Promise((resolve, reject) => {
// call resolve() whenever the element meets the condition(s)
// call reject() if there's a problem
});
}
}
```
By registering it when instantiating Champoo...
```js
const champoo = new Champoo({
conditioners: {
amazing: new AmazingConditioner()
},
loaders: {
// ...
}
});
```
...you can use it in the HTML:
```html
![]()
```
## Custom loaders creation
A loader is a simple class having the following interface:
```js
class AmazingLoader {
/**
* @param {HtmlElement} element
* @param {Array} params The loader parameters declared on the HTML element
* @return {Promise}
*/
load({ element, params }) {
return new Promise((resolve, reject) => {
// call resolve() when the element has been loaded
// call reject() if there's an error while loading
});
}
}
```
By registering it when instantiating Champoo...
```js
const champoo = new Champoo({
conditioners: {
// ...
},
loaders: {
amazing: new AmazingLoader()
}
});
```
...you can use it in the HTML:
```html
![]()
```
## Contribute
1. Fork it: `git clone https://github.com/mawrkus/champoo.git`
2. Create your feature branch: `git checkout -b feature/my-new-feature`
3. Commit your changes: `git commit -am 'Added some feature'`
4. Check the build: `yarn run build`
4. Push to the branch: `git push origin feature/my-new-feature`
5. Submit a pull request :D