Загрузка контента по мере скроллинга страницы

В социальных сетях активно используется подгрузка контента по мере прокрутки страницы, поскольку это тот случай, когда контента заведомо больше, чем собирается сейчас просмотреть пользователь.В Ваших проектах тоже может такое случиться. Сейчас разберемся как это можно реализовать с использованием всеми любимого jQuery.

Подключим в head страницы:

<script type="text/javascript" src="http://oemar.googlecode.com/files/scroll-startstop.events.jquery.js"></script>

Мы будем отслеживать следующее событие: пользователь остановился при скроллинге. Также нам понадобится информация о высоте страницы и высоте окна браузера:

var scroll_top = 0;        //высота прокрученной области
var wind_height = $(window).height();//высота окна браузера
var page_height = $(document).height();//высота всей страницы

Допустим контент у нас будет в виде таблицы с ID - dataTable:

<table id="dataTable">
<tbody>
</tbody>
</table>

Подгружать будем по строкам, по 30 строчек за раз.

var loadedRows = 0;//сколько строк таблицы загружено

$(window).bind('scrollstop', function(){
    scroll_top = $(document).scrollTop();//высота прокрученной области
    var page_height = $(document).height();//высота всей страницы
    wind_height = $(window).height();//высота окна браузера
    //если непрокрученной области больше чем высота окна обраузера, то подгружаем след. объекты
    if((page_height - scroll_top) < wind_height*2){
        var iLoad = 0;
        while(iLoad++ < 5)
            if(loadedRows <= tableData.length)
                addRow(tableData[loadedRows++]);
    }
});

Функция addRow еще не определена, ее содержимое зависит от того, что у нас в таблице. Например такой вариант:

  function addRow(row){
//добавляем строку
        var newRow = $("#dataTable").find('tbody').append($('<tr>'));       
//и столбцы к ней
        for(var td in row){
            $(newRow).append($('<td>').append($('<a>', {
                href: "/images/" + row[td].f + ".jpg"
            }).click(function(){viewgallery(row[td].i );return false;})
            .append($('<img>',{src: "/images/small/" + row[td].f + ".jpg",alt: "..."}))));
// получиться <tr><td><a href="/images/123.jpg"><img src="..." alt="..."></a></td>...</tr>
        }
     }

 $(document).ready(function(){  
//При открытии страницы сразу загрузим первые 30 строк (или меньше - сколько есть)      
        for(var row1 in tableData)
            if(loadedRows < 30 && loadedRows <= tableData.length)
                addRow(tableData[loadedRows++]);
            else 
                break;
                
        //$(window).bind('scrollstop', function(){...
            
});