В настоящее время на многих сайтах можно увидеть динамически подгружаемый контент при прокрутке страницы. Этот эффект стал одной из хороших альтернатив обычной постраничной навигации. Хотя и у него есть свои недостатки, но удобство этого способа их компенсирует. Из этой статьи вы узнаете, как реализовать такой функционал у себя в проекте используя jQuery плагин jScroll.
Подключаем jQuery библиотеку и скрипт:
Теперь нам необходимо добавить HTML разметку:
И наконец, применяем плагин к блоку с индикатором content:
У jScroll есть свои настройки:
- debug – включает возможность отслеживать работу скрипта через консоль, принимает значения true или false (по умолчанию false);
- autoTrigger – отвечает за автоподгрузку контента, принимает значения true или false. По умолчанию установлено true, но если указать false автоподгрузка будет отключена, а вместо неё появится кнопка;
- autoTriggerUntil – указывает сколько раз подгружать контент автоматически (по умолчанию false);
- loadingHtml – в этом параметре мы можем поместить HTML код, который будет в место «Loading. » (по умолчанию «Loading. »);
- padding – отступ до подгружаемого контента. Данный параметр работает, когда в значение autoTrigger установлено true (по умолчанию 0);
- nextSelector – указывается селектор поиска пути обработчика (по умолчанию «a:last»);
- contentSelector — указывается селектор для загрузки части контента (по умолчанию «»);
- callback – функция вызывается в конце каждой загрузки данных. Внутрь её передаётся jQuery объект HTML элемента, в котором находится загруженный контент (по умолчанию false).
Завершая рассматривать подключение плагина и его настройки, важно упомянуть, что передача данных на сервер осуществляется при помощи метода GET.
Пример работы с плагином
После того, как мы рассмотрели основные моменты, связанные с плагином, можно приступать к реализации примера. Мы сделаем скрипт, который при первом открытии страницы будет грузить определенное число записей, а при скроллинге уже догружать остальные.
- Помещаем весь скрипт в jQuery обёртку;
- Определяем две переменных: впервой будет находиться результат выборки, во второй HTML код loading;
- После загрузки страницы обращаемся к файлу jscroll.php с параметром type равным start и добавляем на страницу loading;
- Если пришёл ответ, то добавляем его на страницу и удаляем loading;
- Вызываем плагин.
Переходим к серверу, тут у нас будет чуть больше кода. Я не стал выносить функции в отдельный файл, чтобы всё было максимально компактно.
Вверху файла описываем настройки сервера: $start_count_posts (изначальное число подгружаемых записей), $loading_count_posts (число записей подгружаемых при прокрутке), $path (путь до обработчика) и $text (записи у нас будут отличаться только своими номерами, так как это пример).
Далее мы добавим вспомогательные функции: is_ajax(), is_get() и template_post().
Теперь нам остаётся написать обработчик запросов, который будет анализировать пришедшие данные на сервер и возвращать результат его работы.
Обработка данных начинается с проверки способа, которым отправляются они на сервер. Если всё удачно, то заходим внутрь и обрабатываем пришедшие данные, иначе вызываем функцию exit. Так как в данном примере мы выводим одну и ту же запись, я умышленно поставил задержки в каждом из случаев по одной секунде. Далее формируем HTML код для ответа и отправляем обратно к пользователю.
Вот и всё, теперь вы сможете легко добавить к себе на сайт jScroll плагин для подгрузки контента.
Освойте бесплатно наиболее простой, быстрый и гибкий способ создавать адаптивные веб-сайты.
Дизайн лендинга
Создавайте дизайн любых сайтов — для себя и на заказ!
Популярное
- Главная
- ->
- Материалы
- ->
- Ajax-подгрузка контента при прокрутке страницы
Reg.ru: домены и хостинг
Крупнейший регистратор и хостинг-провайдер в России.
Более 2 миллионов доменных имен на обслуживании.
Продвижение, почта для домена, решения для бизнеса.
Более 700 тыс. клиентов по всему миру уже сделали свой выбор.
Бесплатный Курс "Практика HTML5 и CSS3"
Освойте бесплатно пошаговый видеокурс
по основам адаптивной верстки
на HTML5 и CSS3 с полного нуля.
Фреймворк Bootstrap: быстрая адаптивная вёрстка
Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.
Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.
Верстайте на заказ и получайте деньги.
Что нужно знать для создания PHP-сайтов?
Ответ здесь. Только самое важное и полезное для начинающего веб-разработчика.
Узнайте, как создавать качественные сайты на PHP всего за 2 часа и 27 минут!
Создайте свой сайт за 3 часа и 30 минут.
После просмотра данного видеокурса у Вас на компьютере будет готовый к использованию сайт, который Вы сделали сами.
Вам останется лишь наполнить его нужной информацией и изменить дизайн (по желанию).
Изучите основы HTML и CSS менее чем за 4 часа.
После просмотра данного видеокурса Вы перестанете с ужасом смотреть на HTML-код и будете понимать, как он работает.
Вы сможете создать свои первые HTML-страницы и придать им нужный вид с помощью CSS.
Бесплатный курс "Сайт на WordPress"
Хотите освоить CMS WordPress?
Получите уроки по дизайну и верстке сайта на WordPress.
Научитесь работать с темами и нарезать макет.
Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!
Хотите изучить JavaScript, но не знаете, как подступиться?
После прохождения видеокурса Вы освоите базовые моменты работы с JavaScript.
Развеются мифы о сложности работы с этим языком, и Вы будете готовы изучать JavaScript на более серьезном уровне.
*Наведите курсор мыши для приостановки прокрутки.
Ajax-подгрузка контента при прокрутке страницы
Размер: 48,4 Мб.
Длительность: 26 мин. 40 сек.
В этом видео мы рассмотрим очень полезный прием, который позволит вам обойтись без привычной постраничной навигации.
Вместо этого, контент из базы будет подгружаться автоматически благодаря Ajax-запросам как только пользователь промотает страницу вниз.
Такой подход активно используется в социальных сетях (например, ВКонтакте) и на ряде других сайтов для того, чтобы отображать новые записи, комментарии и т.д.
Это позволяет посетителям сайта быстрее получить доступ к нужному содержимому без необходимости кликать по ссылкам постраничной навигации.
Кроме этого, динамическая подгрузка контента через Ajax-запросы позволяет не перезагружать страницу целиком, что экономит вычислительные ресурсы сервера.
В нашем примере будет реализован подход, при котором на странице изначально будет выводиться 10 записей из базы данных. Далее, при прокрутке страницы вниз идет автоматическая фоновая подгрузка еще 10 записей и т.д., пока не закончатся материалы в базе.
В самом начале урока вы увидите демонстрацию результата и после этого сможете посмотреть подробное объяснение того, как все это работает.
Краткий обзор урока (все подробности смотрите в видео):
1. Для начала создаем новый хост для работы над примером. В моем случае он имеет имя prokrutka. В нем размещаем все файлы примера из доп. материалов.
2. Далее экспортируйте дамп базы данных, который приложен к уроку (файл dump.sql). Он создаст новую базу данных и таблицу с данными, которые используются в примере.
3. Теперь давайте посмотрим на код файла index.php:
Файл index.php является основным файлом, к которому мы производим обращение. В нем мы подключаемся к базе данных, используя файл db.php и инструкцию include.
Затем обращаемся к базе и формируем массив из 10 статей, которые будут изначально отображаться на странице, после чего уже пишем саму HTML-разметку.
В тэге head подключаем два JavaScript-файла — библиотеку jQuery (для совершения Ajax-запроса) и файл scripts.js, в котором мы и напишем сам запрос и другой необходимый для работы JavaScript-код.
В тэге body мы выводим блок div с идентификатором articles. В нем формируем цикл для вывода статей, а под блоком размещаем кнопку "Дальше", которая нам пригодится чуть позже (подробно об этом рассказано в видео).
4. Рассмотрим теперь файл db.php:
Как видите, здесь нет ничего необычного. Мы просто задаем данных для подключения к базе: хост, имя базы, логин и пароль.
После этого производим подключение и указываем кодировку, в которой будет получена информация из базы — UTF-8.
5. Теперь очередь файл-обрабочика — obrabotchik.php:
В этом файле мы будем производить необходимые действия, приняв данные, отправленные с помощью Ajax-запроса.
Первым делом подключаемся к базе данных и задаем переменную startFrom, определяющую, с какой статьи будет производиться вывод.
Получаем мы эту информацию из массива POST, в который она попадет благодаря Ajax-запросу. Значение этой переменной будет меняться, и мы используем его для задания ограничения LIMIT при формировании запроса на выборку.
Далее мы формируем массив с 10 статьями, который будет отдаваться в ответ на Ajax-запрос.
И, наконец, для того, чтобы передать данный массив через Ajax-запрос, мы преобразуем его в json-строку.
6. Теперь переходим к основному функционалу и файлу scripts.js:
Дожидаемся окончания загрузки документа и создаем переменную-флаг inProgress для отслеживания того, происходит ли в данный момент ajax-запрос. Изначально даем ей значение false, т.е. запрос не в процессе выполнения.
Следующим шагом указываем, с какой статьи надо делать выборку из базы при ajax-запросе (переменная startFrom).
После этого работаем с логикой скрипта. По событию прокрутки окна, мы проверяем, достиг ли человек нижней части экрана.
Если да, то мы запускаем Ajax-запрос, передав ему все необходимые данные (включая значение переменной startFrom).
Обратите внимание, что до начала выполнения запроса мы меняем значение для переменной флага с false на true, а после окончания — обратно: с true на false.
Этот прием позволяет нам избежать создания множественных Ajax-запросов пользователем, если он будет активно прокручивать страницу вверх и вниз в нижней части окна.
По окончании запроса мы преобразуем результат, пришедший от обработчика, т.е. json-строку обратно в объект (по сути — массив) для того, чтобы работать с ним средствами JavaScript.
После этого нам остается только отобрать в jQuery-набор наш блок со статьями по идентификатору articles и добавить в него 10 новых статей, запрошенных из базы.
По окончании этого мы увеличиваем на 10 порядковый номер статьи, с которой надо начинать выборку из базы при следующем Ajax-запросе.
Вот в общем-то и все. Общую схему работы вместе с кодом я привел выше, однако если этот обзор вам не до конца понятен, то изучите полную версию урока в видеоформате на этой странице выше.
С уважением, Дмитрий Науменко.
P.S. Неплохо? Тогда присмотритесь к премиум-урокам по различным аспектам сайтостроения, включая JavaScript, jQuery и Ajax, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить практические навыки веб-программирования:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
Видела такое решение Lazy Load, но оно кажется каким-то топорным. Насколько я поняла, эта вещь живет уже очень долго, больше 6 лет точно. Может быть есть более современный метод отложенной загрузки? Может какой-нибудь "хипстерский" плагин со всякими эффектами, добавляющими мягкости появления изображения? )) Подскажите плиз!
P.S. проект на руби, никаких cms
- Вопрос задан более двух лет назад
- 1063 просмотра
Приведённый вами пример реализации lazy load является самым базовым: если вы сами попробуете написать отложенную загрузку, то после отладки ваш код будет выглядеть почти так же; это минимальный функционал, необходимый для lazy load. А для мягкости и эффектов вам и правда достаточно будет CSS, мне кажется.