lazyload

KO | EN

gitlite — search

#golang #swift #react #python #docker #android #javascript #java #jupyter-notebook #svg #ios #swift-3

★ 88 Open GitHub ↗

Lazyload images or lazy execute scripts. （图片脚本懒加载）

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

## Lazyload

A mini lazyload component within 100 lines code, support amd/cmd require.

文章导读 in Chinese: <http://www.barretlee.com/blog/2015/11/16/lazyload-component/>

Live Demo: <http://barretlee.github.io/lazyload/demo/index.html>

### Usage

Include the lazyload scirpt to your html:

```html
<script src="https://raw.githubusercontent.com/barretlee/lazyload/master/index.js"></script>

<div class="box">
  <div class="item"><img src data-src="img-path"></div>
  <div class="item"><textarea>alert(1)</textarea></div>
</div>
```

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

### changelog

- 2015-11-20
  * add `callback` function
  * add `pause` and `restart` function

lazyload

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README