В настоящее время на многих сайтах можно увидеть динамически подгружаемый контент при прокрутке страницы. Этот эффект стал одной из хороших альтернатив обычной постраничной навигации. Хотя и у него есть свои недостатки, но удобство этого способа их компенсирует. Из этой статьи вы узнаете, как реализовать такой функционал у себя в проекте используя 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.

Пример работы с плагином

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

  1. Помещаем весь скрипт в jQuery обёртку;
  2. Определяем две переменных: впервой будет находиться результат выборки, во второй HTML код loading;
  3. После загрузки страницы обращаемся к файлу jscroll.php с параметром type равным start и добавляем на страницу loading;
  4. Если пришёл ответ, то добавляем его на страницу и удаляем loading;
  5. Вызываем плагин.

Переходим к серверу, тут у нас будет чуть больше кода. Я не стал выносить функции в отдельный файл, чтобы всё было максимально компактно.

Вверху файла описываем настройки сервера: $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, мне кажется.