Skip to content

Loaded images of lazy loading components. Compatible with IE7 + browser.

Notifications You must be signed in to change notification settings

sbfkcel/lazyload

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Lazyload

npm version

  • 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

About

Loaded images of lazy loading components. Compatible with IE7 + browser.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published