Бесконечный скроллинг: эффективное решение или причуда? Бесконечная прокрутка (скроллинг): «за» и «против

Мы начнем с обычной страницы галереи, которая содержит контейнер для наших изображений, и будем отслеживать позицию прокрутки с помощью вызова функции JavaScript с коротким интервалом. Каждый раз, когда полоска прокрутки будет находиться внизу страницы, мы будем делать AJAX запрос ко внешнему PHP файлу, который возвращает список имен изображений. После чего, все что нужно сделать - добавить эти изображения к нашему контейнеру, и модифицировать высоту страницы, премещая позицию прокрутки выше.

Шаг 2. Разметка HTML

Здесь требуется только установить заголовок и контейнер для наших изображений. Миниатюры будут сгруппированы в наборы из трех строк. Каждая миниатюра содержит ссылку на полноразмерное изображение. После каждой группы мы добавим текст, который показывает общее количество выведенных изображений и ссылку на начало страницы.

Вэб галерея| Бесконечная прокрутка

Показано 9 изображений | Вверх

Шаг 3. CSS

CSS также весьма прост.

Body{ background:#222; color:#666; } #header{ font-family:Arial, Helvetica, sans-serif; font-size:24px; font-weight:bold; text-align:left; text-indent:35px; margin: 0 auto; width:800px; margin-bottom:10px; } hr{ margin: 20px; border:none; border-top: 1px solid #111; border-bottom: 1px solid #333; } p{ color:#444; text-align:left; font-size:10px; margin-left: 20px; margin-bottom: -10px; } a{ color:#444; }

Шаг 4.

Теперь добавим немного CSS3 для скругления углов и вывода теней. Нужно испоьзовать -moz-box-shadow и -moz-border-radius для Firefox и -webkit-box-shadow и -webkit-border-radius для Chrome и Safari.

#container{ margin: 0 auto; width:800px; border:1px solid #333; -moz-border-radius: 10px; -webkit-border-radius: 10px; font-family:Verdana, Geneva, sans-serif; text-align:center; } img{ border:10px solid #444; -moz-border-radius: 5px; -webkit-border-radius: 10px; margin: 15px; } img:hover{ border-color:#555; -moz-box-shadow: 0px 0px 15px #111; -webkit-box-shadow: 0px 0px 15px #111; }

Шаг 5. PHP скрипт

Он будет очень коротким. Нужно вызвать PHP скрипт с индексом следующего изображения которое нам нужно в качестве параметра. Первым делом мы должны взять все имена изображений из папки и сохранить их в массиве. Для хранения изображений организовано две папки: thumb и img , которые содержат миниатюры и полноразмерные изображения, соответстенно. Миниатюры должны иметь абсолютно точно такие же имена, как и полноразмерные изображения.

Как уже упоминалось, изображения группируются в наборы из трех строк, каждая их которых сожержит по три изображения. Таким образом нам надо вернуть только девять имен изображений для группы. Мы начинаем от индекса, который получили в качестве параметра, $n , и заканчиваем $n+9 . На каждом шаге цикла мы добавляем имя изоображения и ";" после него в строку возвращаемого текста. Здесь есть небольшой трюк. Нам не нужно бесконечное количество номеров изображений. Чтобы создать эффект бесконечной галереи, которая никогда не кончается, каждый раз индекс следующего изображения должен быть больше общего количества изображений и мы должны начинать с начала. Это выполняется с помощью функции % (деление по модулю) идекса и общего количества изображений.

$i%count($files)

В результате мы получаем остаток от деления. Например, если индекс $i count($files) составляет 45, результат будет 5. А если если индекс $i равен 50 и количество изображенийcount($files) составляет 65, то результат будет 50. В завершении мы возвращаем текст ответа.

Шаг 7

Здесь приведен полный текст PHP скрипта. Его нужно разместить в новом файле .php .

Шаг 8. JavaScript

Определим несколько переменных, которые понадобятся в дальнейшем:

Var contentHeight = 800; var pageHeight = document.documentElement.clientHeight; var scrollPosition; var n = 10; var xmlhttp;

Для определения момента, когда полоса прокрутки будет находиться внизу страницы, нам нужно определить три переменные:

contentHeight - высота изначальной галереи
pageHeight - высота видимой страницы в браузере
scrollPosition - положение полосы прокрутки, отмеренное сверху

Также нам нужна будет переменная для хранения индекса следующего изображения (который мы передаем в PHP скрипт), и переменная для объекта запроса Ajax.

Шаг 9

Нужно определить функцию, которая будет добавлять изображения к нашему HTML контейнеру.

Function putImages(){ if (xmlhttp.readyState==4){ if(xmlhttp.responseText){

Объект запроса изменяет свои состояния в ходе выполнения запроса. Каждое состояние ассоциируется с числовым значением. Нам интересно окончательное состояние, когда запрос завершен и значение равно 4. Сначала мы проверяем, находится ли запрос в нужном состоянии и затем проверяем, получили мы ответ или нет.

Шаг 10

Если оба условия выполнены, мы должны обработать возвращенный текст. Это означает, что мы должны разделить имена фалов и поместить их в массив. PHP скрипт возвращает единичную строку с именами, разделенными точкой с заптятой, напрмер: "Achievements.jpg;Bw.jpg;Camera.jpg;Cat-Dog.jpg;CREATIV.jpg;creativ2.jpg;Earth.jpg;Endless.jpg;EndlesSlights.jpg;"

Var resp = xmlhttp.responseText.replace("\r\n", ""); var files = resp.split(";");

Нужно решить маленькую проблему. Текст ответа может содержать символ начала новой строки на первой позиции. А он нам не нужен. Задачча легко решается с помощью функции replace , которая принимает два параметра: "\r\n" - символ новой строки, и "" - пустую строку, которая заменяет все проявления первого параметра. Теперь остается только разделить строку по символу ";".

Шаг 11.

Теперь добавляем изображения в наш контейнер.

Var j = 0; for(i=0; i $this.height () && ! busy) {

// Идет процесс
busy
$this.) .html ) ;

// Запустить функцию для выборки данных с установленной задержкой
// Это полезно, если у вас есть контент в футере
setTimeout(function () {

GetData() ;

} , $settings.delay ) ;

}
} ) ;
}

Вы наверняка заметили использование переменных, так сказать параметры плагина, о них немного позже. Функция AJAX запроса к PHP файлу getData() , выглядит следующим образом:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

// Функция AJAX запроса
function getData() {

// Формируется POST запрос к ajax.php
$.post ("ajax.php" , {

Action : "scrollpagination" ,
number : $settings.nop ,
offset : offset,

} , function (data) ) .html ($initmessage) ;

// Если возвращенные данные пусты то сообщаем об этом
if (data ) .html ($settings.error ) ;
}
else {
// Смещение увеличивается
offset = offset+ $settings.nop ;

// Добавление полученных данных в DIV content
$this.find (".content" ) .append (data) ;

// Процесс завершен
busy = false ;
}

} ) ;

Файл AJAX.php

PHP сценарий запроса к БД и формирования структуры выходных сообщений может выглядеть любым приемлемым для Вас образом. Все что Вам нужно сделать, это взять некоторую информацию из базы данных MySQL на ваш выбор. Далее приведен очень простой ajax.php файл, который берет информацию из базы данных MySQL и отображает содержимое с названием и ссылкой.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22