JQuery Lazy Loader Plugin
infinite scroll plugin

Implementation

To implement Lazy Loader on a page, you need to link the following CSS and JS files.

<!-- JQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<!-- Bootstrap 3 / Optional -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/bootstrap.min.js"></script>

<!-- Lazy Loader plugin -->
<link rel="stylesheet" href="jquery-lazyloader/css/lazyloader.css">
<script src="jquery-lazyloader/js/lazyloader.js"></script>

Then, all that you have to do is call Lazy Loader on your page and customize the json file or the ajax loader (with your database informations to begin: db.php).

$(function(){
    $('.lazy-wrapper').lazyLoader({
        ajaxLoader: 'get_datas.php' // script that gets items (from a database for example)
    });
});

Basic HTML code

<div class="lazy-wrapper"></div>

JSON use

You can also use JSON file to define your places. Simply enter the url of this file instead of the default array of places.

$(function(){
    $('.lazy-wrapper').lazyLoader({
        jsonFile: 'datas.json' // alternative method to the ajax loader (path to json file)
    });
});

JSON example:

{
    "items": [
        {"html": "<div class=\"lazyItem\"><img src=\"images/img_1.jpg\" ><span class=\"lazyContent\"><h3>Image 1</h3></span></div>"},
        {"html": "<div class=\"lazyItem\"><img src=\"images/img_2.jpg\";><span class=\"lazyContent\"><h3>Image 2</h3></span></div>"},
        {"html": "<div class=\"lazyItem\"><img src=\"images/img_3.jpg\"><span class=\"lazyContent\"><h3>Image 3</h3></span></div>"}
    ]
}

General options