Lazy Load

An example of a lazy load list using JSON and Twitter API calls.

by ignaciocorreia

HTML

<ul data-role="listview" data-theme="b" id="lazy_list"></ul>

<div class="loading" style="display:none;"><img src="http://code.jquery.com/mobile/1.1.0/images/ajax-loader.gif" width="46" height="46" alt="Loading..." /></div>

<div class="no_results" style="display:none;">No results found.</div>

CSS

body {
    font: 100% Arial, Helvetica, sans-serif;
    margin: 25px;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
li {
    background: #eee;
    margin: 5px;
    padding: 30px;
}
.loading {
    background: #000;
    border: 0;
    -webkit-border-radius: 36px;
    -moz-border-radius: 36px;
    border-radius: 36px;
    box-shadow: 0 1px 1px -1px #fff;
    display: block;
    height: 46px;
    left: 50%;
    margin:-23px 0 0 -23px;
    opacity: .18;
    overflow: hidden;
    padding:1px;
    position: fixed;
    text-align:center;
    top: 50%;
    width: 46px;
    z-index: 9999999;
}

JavaScript

var item_page = 1; // Page of items
var items_per_page = 10; // Items per page
var cancel_request = false; // Cancel request flag
var stop_scroll = false; // Stop scroll flag

function getItems(page) {
    if (cancel_request === false) {
        $.getJSON('http://search.twitter.com/search.json?q=star%20wars&rpp=' + items_per_page + '&page=' + page + '&include_entities=1&result_type=mixed&callback=?', function(data) {
            // Query server for items
            $.each(data.results, function(index) {
                $('<li>' + data.results[index].text + '</li>').appendTo("#lazy_list");
            });
            // Turn off requests if current result set is less than page min
            if ($(data.results).length < items_per_page) {
                cancel_request = true;
            }
            // Show message if no items
            if ($(data.results).length === 0) {
                $(".no_results").show();
            }
        }).success(function() {
            // Success
            item_page++; // Increment page value
            $(".loading").hide(); // Hide loading screen
            stop_scroll = false; // Restart scroll
        }).error(function() {
            // Error
        });
    } else {
        // Hide loading screen
        $(".loading").hide();
    }
}

$(document).ready(function() {
    // Load initial page of tweets on load
    getItems(item_page);

    // Stop everything if no more requests
    if (cancel_request === false) {
        // Window scroll event
        $(window).scroll(function() {
            // Check if scroll is stopped to avoid multiple requests of the same page
            if (!stop_scroll) {
                // If user scrolls to the bottom of the page, grab the next page of tweets
                if (($(window).scrollTop() + 100) >= ($(document).height() - $(window).height())) {
                    // Bottom of screen
                    stop_scroll = true; // Stop scroll event
                   ...