• ×

    • Бесконечная прокрутка (скроллинг): «за» и «против. Бесконечный скроллинг и пагинация: что лучше

    14.07.2019

    a! Разбивка контента на страницы с номерами является классической схемой пагинации, интуитивно понятной и привычной для пользователей. Однако, в последнее время все больше сайтов начинают «применять на практике» такой вид навигации по страницам как, Infinite Scroll (бесконечная прокрутка). Исключением не стали даже такие гиганты как Google, Facebook и ВКонтакте. Естественно у данного вида пагинации есть свои плюсы и минусы, но это уже другой разговор. В этом уроке мы рассмотрим, как можно реализовать подобную навигацию.

    Как это работает?!

    Да все очень просто, если пользователь уже прокрутил определенное количество записей и находится в нижней части страницы, то с небольшой задержкой подгружаются еще сообщения. Для этого с помощью $.post формируем POST запрос к странице загрузки данных из БД (.php файл), HTML структура записей формируется этом же файле. После чего, структурирование HTML разметкой данные возвращаются в скрипт и размещаются на странице.

    Процесс определения положения пользователя на странице:

    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

    // Если прокрутка включена
    if ($settings.scroll == true ) {
    // .. и пользователь прокручивает страницу
    $(window) .scroll (function () {

    // Проверяем пользователя, находится ли он в нижней части страницы
    if ($(window) .scrollTop () + $(window) .height () > $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

    Как уже упоминалось, изображения группируются в наборы из трех строк, каждая их которых сожержит по три изображения. Таким образом нам надо вернуть только девять имен изображений для группы. Мы начинаем от индекса, который получили в качестве параметра, $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

    Похожие статьи
     
    Категории
    Видеоматериалы
    Популярное
    Новое