wallacode/snorlax

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

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: []
});

Name	Default	Description
bucketSize	400	height of each bucket
bucketBuffer	1	buffer of how much buckets before and after we should load
attrPrefix	'data-snorlax'	prefix for the attrs on the html
cssClassPrefix	'snorlax'	prefix for the css classes
event	'scroll'	which event will trigger the loading
horizontal	false	will set the lazy loader to work horizontaly
wrap	''	ID of the wrapper of the horizontal scroll, in the most of the times it will be a UL ID
scrollCB	function/array	see section about callbacks
showCB	object	see section about callbacks

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

snorlax's Issues

It would be great to add github demo page to project