Нескінченний скролл з автоматичною завантаженням контенту
1. Постановка завдання
Отже, давайте розглянемо наступний приклад. Есть вот такой сайт, на головній сторінці, якого виводяться звичайні статті:
Нам же необхідно створити так званий нескінченний скролл, тобто, якщо опустити повзунок вертикального скролла в самий низ сторінки - виконається автоматичне завантаження контенту і будуть відображені статті відповідні наступної сторінки. І ці статті будуть як би продовженням контенту всього основного сайту. Далі користувач продовжує читання статей, тим самим знову ж опускає скролл в самий низ сторінки і знову ж буде виконана подгрузка контенту. Звичайно, завантажувати контент нам потрібно буде асинхронно, тому ми будемо використовувати метод AJAX.
2. Огляд роботи тестового сайту
Отже, весь вихідний код тестового сайту я в цій статті наводити не буду, так як він досить великий, та й в исходниках до даному уроку Ви зможете їх побачити. Головний файл даного сайту - це index.php, який, власне і виводить на екран весь контент даного сайту. Давайте розглянемо фрагмент коду даного сайту, а саме код PHP файлу index.php:
Як Ви бачите, спочатку підключаємо конфігураційний файл, в якому виконується з'єднання з базою даних і визначається константа COUNT_PER_PAGE - кількість статей виводяться на одній сторінці. І, файл, functions.php - в якому міститься функція отримання статей з бази даних, відповідно до обраної сторінкою (до неї ми ще повернемося).
Тепер давайте розглянемо файл functions.php:
Як Ви бачите функція приймає лише два параметри: $ page - номер сторінки, яку необхідно відобразити, і $ count_per_page - кількість статей, що відображаються на одній сторінці (звичайно даний параметр можна було і не передавати, а використовувати константу з конфігураційного файлу, але так буде універсальніше ). Ця функція виконує SQL запит по вибірці даних з бази даних і що б реалізувати механізм отримання певних статей, відповідно до сторінками, необхідно в запиті використовувати інструкцію LIMIT, і задати власне початок вибірки і кількість обираних статей. Для того що б визначити початок вибірки ми скористаємося наступним виразом:
3. Додаємо допоміжний HTML код
Перед тим як почати писати код, для нескінченного скролла, давайте додамо допоміжний HTML код:
Блок div з класом load необхідний, для індикації процесу відправки інформації на сервер. Тобто спочатку, даний блок прихований, але коли йде звернення до сервера, даний блок буде відображатися на екрані. На тлі цього блоку буде встановлена анімаційна картинка (gif). Відразу ж давайте додамо стилі даного блоку:
Блок div з класом pager - інформаційний, він необхідний, що б ми з Вами бачили, яка сторінка зараз відображається. Відразу ж давайте додамо стилів до даного блоку (даний блок я просто виведу в довільному місці сайту, так як швидше за все його взагалі не потрібно показувати користувачеві, але на етапі розробки скрипта він дуже корисний).
Тепер відкриємо файл script.js і додамо в нього наступний код:
Значить, використовуючи метод slice, ми з Вами виключимо знак питання з отриманого рядка. І відразу ж, використовуючи метод split розіб'ємо її в масив, який збережемо в змінної param. Розбивати звичайно ж будемо по символу # 038 ;. Тобто в змінно param міститься масив виду:
А нам необхідно отримати значення параметра page. Значить, використовуючи цикл for, створимо масив result, у якого назви осередків - це назви GET параметрів, а значення - це відповідно значення цих же GET параметрів:
Тепер перевіримо, чи є в масиві result осередок, page, і якщо є то її значення запишемо в змінну page. Якщо ж даного осередку немає, то в змінну page зберігаємо значення 1 (за замовчуванням). Далі, виберемо за допомогою jQuery блок з класом pager, відобразимо його на екрані, за допомогою методу show () і додамо вміст даного блоку (текст даного блоку), значення змінної page, використовуючи для цього метод text ().
Далі оголосимо змінну block і збережемо в ній значення FALSE. Дана змінна буде використовуватися для блокування скрипта. Тобто якщо в даній змінно буде збережено значення TRUE, значить, робота наступної ділянки коду буде блокована (про який ми з Вами поговоримо далі). Далі слід ось цю ділянку коду:
Зітріть вибираємо елемент window і викликаємо метод scroll (). Який задає функцію обробник події scroll - переміщення повзунка скролла. Тобто коли користувач перемістить повзунок скролла, виконається функція, описана в даному методі. Далі перевіримо, якщо повзунок скролла знаходиться в самому низу сторінки і блокування скрипта не включена, то ми насамперед блокуємо скрипт: block = true;
Потім показуємо блок з класом load, використовуючи метод fadeIn (), зі швидкістю 500 мілісекунд і після завершення всіх анімаційних ефектів, виконається функція описана в другому параметрі методу fadeIn (). У цій функції ми відразу ж збільшуємо значення зміною page на одиницю, так як нам потрібно відобразити наступну сторінку. Потім звертаємося до методу ajax і передаємо йому наступні параметри:
url - шлях до фалу на сервері до якого ми звертаємося, в даному випадку це index.php;
type - тип запиту, за допомогою якого ми передаємо дані, в нашому випадку це тип GET;
data - дані, які передаються на сервер. Передаємо параметр page - значення нової відображуваної сторінки і параметр move із значенням 1, необхідний для формування відповіді від сервера.
Дивіться так як при переміщенні скролла постійно спрацьовує обробник події scroll, роботу скрипта необхідно блокувати на час передачі даних на сервер, так як якщо користувач швидко переміщує скролл і ми в цей час відправляємо дані на сервер, відразу ж повторно може спрацює обробник цієї події і так далі поки користувач не зупинить повзунок скролла. І вийде що ми на сервер будемо відправляти безліч запитів, а це створить серйозну навантаження, та й візуально буде виглядати погано, так як в одну мить відобразиться кілька сторінок поспіль.
Для визначення того що повзунок скролла знаходиться в самому низу екрану, використовуємо наступні значення:
$ (Window) .height () - висота вікна браузера;
$ (Document) .height () - висота документа (іншими словами висота нашого сайту).
$ (Window) .scrollTop () - значення повзунка скрол. Тобто висота на яку піднімається контент сайту вгору, за межі видимої частини браузера при переміщенні повзунка скролла.
Значить якщо $ (window) .height () + $ (window) .scrollTop () більше або дорівнює $ (document) .height () (висоті документа), значить можна стверджувати, то повзунок знаходиться в самому низу браузера.
5. Формуємо відповідь від сервера
Коли ми звертаємося в файл index.php, використовуючи AJAX і передаємо параметр page зі значенням відображуваної сторінки, відразу ж спрацює перевірка:
Тобто перевіряємо чи є в суперглобального масиві GET осередок move із значенням 1 і якщо так, то в циклі проходимо по масиву $ result і як би виводимо його на екран. Але ми ж звертаємося до даного файлу віддалено, використовуючи AJAX тому на екран нічого не відбудеться з а навпаки, все що мало вивестися на екран, буде відповіддю від сервера, який потрапить в змінну html.
Після циклу викликаємо функцію exit (), що б відразу ж завершити роботу скрипта після відпрацювання циклу. Тепер можна перевіряти роботу скрипта в цілому.
Дивіться, при опусканні скролла в самий низ, з'являється спочатку блок з класом load а потім з'являється наступна сторінка, тобто далі опускаючи скролл вниз ми побачимо наступну сторінку.
Як ви бачите, все відмінно працює, а тому цей урок можна завершувати. Всього Вам доброго, і побачимося в наступних уроках.
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі