Робимо "ледачу" прокрутку на jquery
Скільки я себе пам'ятаю, веб-розробники завжди зверталися до старої-доброї пагінацію в разі, коли їм необхідно було відобразити велику кількість контенту. Не зрозумійте мене неправильно, пагінація досі є ефективним способом відображення контенту, але в цій статті ми поговоримо про інший підхід - "ледачою" прокручуванні, також відомої під назвою "нескінченної прокрутки" і "відмовою від пагінацію". За допомогою цієї техніки подгрузка контенту проводиться за допомогою AJAX, коли користувач прокручує сторінку до місця, де завантажений контент закінчується. Лінива прокрутка використовується деякими гігантами інтернету, такими як Facebook і Pinterest. У цьому пості ми спробуємо реалізувати свій плагін для ледачої завантаження на jQuery.
Переваги і недоліки
Переваги такого методу очевидні. Для того, щоб отримати додаткову порцію контенту вам немає необхідності переходити на іншу сторінку, що також збиває вашу увагу і змушує дивитися в іншу область сторінки. Додавши можливість ледачою завантаження ви утримуєте увагу користувача на одній і тій же області в процесі читання.
Лінива завантаження ефективна не у всіх ситуаціях. Наприклад, у випадках, коли користувач переходить за посиланням, а потім хоче повернутися на попередню сторінку за допомогою історії браузера, він втрачає позицію в тій частині, яка була довантажуючи за допомогою AJAX. Одним із способів вирішення подібної проблеми - відкривати всі посилання в новому вікні або вкладці.
В добавок, перед тим, як вирішите використовувати цю технологію знайте, що пошукові системи не дуже-то дружні з такими рішеннями. Для того, щоб уникнути проблеми видимості контенту пошуковикам, переконайтеся, що ви можете надати альтернативу з пагінацією або картою сайту.
Почнемо з начерку дуже простий сторінки. Найважливіші частині сторінки показані в коді нижче. Повні файли можна подивитися в исходниках.
Основні зауваження
Якщо ви придивитеся до документа, що ми створили, то побачите, що нові пости будуть завантажені при кліці на кнопку "завантажити ще". Ось пункти, які ми будемо реалізовувати:
- необхідно зробити запит на URL, який поверне нам список елементів, які необхідно буде вставити на сторінці
- цей процес повинен повторюватися кожен раз, як буде натиснута кнопка, але в результаті повинні повертатися нові пости
- нові пости повинні видаватися на кожен запит до тих пір, поки є, що повертати
- коли більше не залишилося постів, необхідно повідомити користувачеві, що він досяг кінця
Шаблони відповіді AJAX
В ідеалі необхідно оголосити змінну, в якій ми будемо зберігати номер сторінки, і за допомогою цього номера визначати URL, на який ми будемо відправляти запит. У нашому демонстраційному прикладі у нас будуть три таких сторінки: 2.html, 3.html і порожня сторінка 4.html.
Коли ви натискаєте на кнопку завантаження наступної порції даних, проходить деякий час від моменту відправки запиту і отримання відповіді. В такому випадку ми будемо ховати кнопку завантаження, а замість неї будемо показувати певний текст, який свідчить про те, що йде завантаження елементів:
Додаємо отримані дані на сторінку
Спочатку повернемо назад ті зміни, які ми виконали, поки запит ще виконувався, тобто, показати кнопку "завантажити ще", і заховати інформаційний текст. По-друге, необхідно вставити отримані дані на сторінку, після тих елементів, що вже є на сторінці. Зауважте, що для спрощення в цьому прикладі ми отримуємо дані HTML відразу, як результат запиту. Можна надсилати відповідь в форматі JSON, додавши в нього додаткові змінні, як статус або повідомлення. Код ставки даних представлений нижче:
Обробляємо варіант, коли дані закінчилися
Як тільки ви досягнете останнього поста, вам потрібно показати користувачеві, що більше постів немає. Зробити це можна різними способами. Можна надсилати статус у вигляді вбудованого в відповідь коду або повідомлення. Так як ми безпосередньо використовуємо розмітку HTML в цьому прикладі, то порожній відповідь в нашому випадку буде говорити про те, що дані закінчилися.
висновок
І, нарешті, відповідь в JSON може містити повідомлення, яке говорить, чи пройшов запит коректно; дані; а також інформацію про те, чи є ще пости для завантаження. В даному випадку це ефективніший спосіб відправляти результат.
5 останніх уроків рубрики "jQuery"
Сьогодні ми б хотіли вам розповісти про бібліотеку TypeIt - безкоштовному jQuery плагін. З її допомогою можна імітувати набір тексту. Якщо все налаштувати правильно, то можна домогтися дуже реалістичного ефекту.
jQuery плагін для створення тимчасової шкали.
jQuery плагін для створення діаграми Ганта.
Приклад того як здійснити завантаження файлу через PHP і jQuery ajax.
Євген Романенко
lindorenko
Kuzen Stenli
Це неправильний підхід, коли для того щоб дізнатися чи є ще результати, потрібно натиснути на кнопку. Потрібно в поточному дії наперед знати чи будуть ще результати, а для цього потрібно з'ясувати загальна кількість результатів і номер поточної сторінки. дерзайте
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!