Snorlax

Snorlax is lightweight standalone lazy loading library - lazy loading as it meant to be.

§ Version: 1.0.0
§ Author: Walla!Code
§ Repo: https://github.com/wallacode/snorlax

This plugin doesn't need jQuery and is totaly standalone, the minified size is 1.86Kb !!!

install from npm

npm install -g snorlax

Demo Page

Demo Page

Use

HTML

<ANY class="snorlax" data-snorlax-alt="bla" data-snorlax-src="pic.jpg"></ANY>

Javascript

regular:

var lazy = new Snorlax();

Horizontal Lazy Load

HTML

<div class="carusela">
	<ul id="demo">
		<li><ANY class="snorlax" data-snorlax-alt="bla" data-snorlax-src="pic.jpg"></ANY></li>
		<li><ANY class="snorlax" data-snorlax-alt="bla" data-snorlax-src="pic.jpg"></ANY></li>
		<li><ANY class="snorlax" data-snorlax-alt="bla" data-snorlax-src="pic.jpg"></ANY></li>
		<li><ANY class="snorlax" data-snorlax-alt="bla" data-snorlax-src="pic.jpg"></ANY></li>
		<li><ANY class="snorlax" data-snorlax-alt="bla" data-snorlax-src="pic.jpg"></ANY></li>
		<li><ANY class="snorlax" data-snorlax-alt="bla" data-snorlax-src="pic.jpg"></ANY></li>
		<li><ANY class="snorlax" data-snorlax-alt="bla" data-snorlax-src="pic.jpg"></ANY></li>
	</ul>
</div>

Javascript

var lazy = new Snorlax({
	horizontal: true,
	wrap: 'demo'
});

Buckets

We work with the principles of Bucket sort that works in O(n). We divide the screen into buckets according to the bucketSize param, in each iteration we show a specific bucket and the buffer buckets according to the bucketBuffer param.

Callbacks

We have 2 kinds of callbacks: show callbacks ans scroll callbacks

Scroll Callbacks

will fire on every scroll, the callback gets object with current and prev scroll locations

var lazy = new Snorlax({
    scrollCB: function(obj){ console.log(obj); }
});

also supports multiple callbacks:

var lazy = new Snorlax({
    scrollCB: [
        function(obj){ console.log(obj); },
        function(obj){ alert(obj); }
    ]
});

Show Callbacks

we can supply multiple callbacks and on the show event the selected callback will file

<ANY class="snorlax" data-snorlax-cb="first"></ANY>

var lazy = new Snorlax({
    showCB: {
        'first': function(obj){ console.log(obj); },
        'second': function(obj){ alert(obj); }
    }
});

Options

var lazy = new Snorlax({
	bucketSize: 400,
	bucketBuffer: 1,
	attrPrefix: 'data-snorlax',
	cssClassPrefix: 'snorlax',
	scrollDelta: 0,
	event: 'scroll',
	horizontal: true,
	wrap: 'demo',
    scrollCB: [],
    showCB: []
});

Methods

loadAll() will load all the objects.

var lazy = new Snorlax();
...
lazy.loadAll();

refreshConfig(config) change the config of Snorlax.

var lazy = new Snorlax();
...
lazy.refreshConfig({
  threshold: 300,
  attrPrefix: 'data-shota-snorlax'
});

stop() stop Snorlax

var lazy = new Snorlax();
...
lazy.stop();

start() start Snorlax

var lazy = new Snorlax();
...
lazy.start();

addScrollCallback(cb) Add callback to the scroll callbacks array