Snorlax

§ 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 !!!

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'
});

Callbacks

If you want you can create youre own loading function, this function will run when its the items time to be loaded

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

function boom(e){
	alert('BOOM');
}

Options

var lazy = new Snorlax({
	threshold: 100,
	attrPrefix: 'data-snorlax',
	cssClassPrefix: 'snorlax',
	scrollDelta: 0,
	event: 'scroll',
	horizontal: true,
	wrap: 'demo'
});

Name | Default | Description --------------------|----------------|------------------- threshold | 400 | number of pixels to load the image attrPrefix | 'data-snorlax' | prefix for the attrs on the html cssClassPrefix | 'snorlax' | prefix for the css classes scrollDelta | 100 | (px) the interval for the scroll event, 0 for every scroll event 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

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();