Lazynity

What's that ?

A jquery plugin for lazy loading.

For developers: this plugin was created with KISS & DRY principles in mind. Don't hesitate to fork the project and to improve the code.

Demos & Examples

Desktop

Mobile (jQuery Mobile)

How to use it ?

Lazynity depends on jQuery. Include them both in end of your HTML code:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazynity.js" type="text/javascript"></script>

HTML

<div id="wrapper">
  <ul id="mylonglist">
  </ul>
</div>

JS

$(document).bind("ready", function(){

    $.getScript("ais_120000_loc.js",function(){

        $('#mylonglist').lazynity({
            renderingFn:    Mustache.render,
            models:         ais_data,
            template:       "<li>{{mobileId}}</li>",
            height:         600,
            treshold:       40
        });

        $('#mylonglist').bind('rendered',function(){
            console.log('rendered');
        });

    });

});

CSS

No CSS hack needed.

Methods, Options and Events

Methods

$('#myul').lazynity( options );

Options

• renderingFn Function to parse and render html with templates
• models Data (array)
• template html snippet (e.g. "
• {{mobileId}}
")
• height height of the list
• treshold number of items to load each time

Events

• rendered Triggered when the plugin has finished to load data and the list is rendered

License

This plugin is available under the Creative Commons License.