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