https://github.com/barretlee/lazyload
Lazyload images or lazy execute scripts. (图片脚本懒加载)
https://github.com/barretlee/lazyload
javascript lazyload lazyload-images lazyload-script
Last synced: about 1 year ago
JSON representation
Lazyload images or lazy execute scripts. (图片脚本懒加载)
- Host: GitHub
- URL: https://github.com/barretlee/lazyload
- Owner: barretlee
- License: mit
- Created: 2015-11-16T11:50:49.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-07-05T02:01:17.000Z (almost 10 years ago)
- Last Synced: 2025-03-30T07:11:18.174Z (about 1 year ago)
- Topics: javascript, lazyload, lazyload-images, lazyload-script
- Language: HTML
- Homepage: https://barretlee.github.io/lazyload/demo/index.html
- Size: 13.7 KB
- Stars: 88
- Watchers: 6
- Forks: 34
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Lazyload
A mini lazyload component within 100 lines code, support amd/cmd require.
文章导读 in Chinese:
Live Demo:
### Usage
Include the lazyload scirpt to your html:
```html
alert(1)
```
It exports an api to global:
```js
new Lazyload('.box .item', {
callback: function(){
console.log("All item loaded");
}
});
```
### Params
There are two param your can set when get an Lazyload instance:
```js
new Lazyload('.item', {
tag: "data-src",
distance: 0,
callback: function(){
// ...
}
});
```
- `tag`, default is 'data-src', we set the lazyload image 'src' to null, then read 'data-src' attribute;
- `distance`, default is 0, if you want to show the lazyload element in advance, you can set it to a positive number;
- `callback`, when all item loaded, it will trigger.
Also, two more api:
```js
var lazyload = new Lazyload();
lazyload.pause();
setTimeout(function(){
lazyload.restart();
});
```
- `.pause()`, pause the lazyload use the inner variable `_pause`;
- `.resetart()`, set `_pause` false;
### Liscese
Under MIT Liscese. Copyright (c) 2015 小胡子哥(Barret Lee)
### changelog
- 2015-11-20
* add `callback` function
* add `pause` and `restart` function