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

В социальных сетях активно используется подгрузка контента по мере прокрутки страницы, поскольку это тот случай, когда контента заведомо больше, чем собирается сейчас просмотреть пользователь.
В Ваших проектах тоже может такое случиться. Сейчас разберемся как это можно реализовать с использованием всеми любимого 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(){...

});
Возврат % от покупок

Другие публикации:



Написать комментарий через:

 
               
  • Локальный блог
  •  
 

Ваш отзыв

Имя *

Почта (скрыта) *

Сайт

Напишите цифрами двa вoceмь двa *

Сообщение

Один отзыв на «Загрузка контента по мере скроллинга страницы»

  1. Виктор пишет:

    Спасибо, то что нужно

 
Статусы для соц.сетей на ArtKiev Design Studio