image-lazyload
v1.0.2
Published
Loaded images of lazy loading components. Compatible with IE7 + browser.
Downloads
32
Maintainers
Readme
Lazyload
- Loaded images of lazy loading components.
- Compatible with IE7 + browser.
- Allow custom loading style.
Use
2.1 Html
- html set the
data-src
property. data-cover
is not necessary
<img class="img" data-src="http://xxx/img1.jpg" data-cover="http://xxx/img1-cover.jpg">
<img class="img" data-src="http://xxx/img2.jpg" data-cover="http://xxx/img2-cover.jpg">
<img class="img" data-src="http://xxx/img3.jpg" data-cover="http://xxx/img3-cover.jpg">
<div class="imgBg" data-src="http://xxx/img4.jpg" data-cover="http://xxx/img4-cover.jpg"></div>
<div class="imgBg" data-src="http://xxx/img5.jpg" data-cover="http://xxx/img5-cover.jpg"></div>
<div class="imgBg" data-src="http://xxx/img6.jpg" data-cover="http://xxx/img6-cover.jpg"></div>
2.2 Import ./dist/Lazyload.js
file to the page
<script src="http://xxx/dist/Lazyload.js"></script>
or
let Lazyload = require('./dist/Lazyload.js');
2.3 Initialization
//Get elements
var eList = [];
eList.push.apply(eList, document.getElementsByClassName('img'));
eList.push.apply(eList, document.getElementsByClassName('imgBg'));
//Create Lazy
var lazy = new Lazyload({
obj:eList, //elements
range:200 //Extra range
});
// //custom tips
// lazy.tips = function(obj){
// var e = obj.o, //element
// schedule = obj.schedule; //load schedule
// console.log(e,schedule);
// };
//Init
lazy.init();
Npm
npm install image-lazyload
import Lazyload from 'image-lazyload'
let imgs = document.getElementsByClassName('img'),
lazy = new Lazyload({
obj:imgs,
range:200
});
lazy.init();
Demo
License
MIT