Jquery подгрузка при прокрутке

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

Размер: 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 с нуля. Все это поможет вам быстрее и проще освоить практические навыки веб-программирования:

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!

🚀 Лучшие премиум-темы для Вордпресс от топовых разработчиков мира

Что-то давненько я не публиковал никакого кода. Сегодня я исправлю ситуацию и дам несколько полезных сниппетов на jQuery, которые обязательно вам пригодятся на ваших сайтах.

Я не буду вдаваться в теорию, вся документация по jQuery есть на официальном сайте библиотеки. Я лишь напомню, что, такое jQuery.

jQuery — это библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX.

1. Плавная прокрутка к началу страницы

Без нее уже не обходится ни один сайт. Всего лишь 4 строчки кода позволят вашим посетителям в один клик плавно пркрутить всю страницу вверх.

2. Дублируем заголовки таблиц

Чтобы улучшить восприятие и читабельность ваших таблиц, можно продублировать их заголовки снизу под таблицей. Казалось бы мелочь, но это очень удобно в сложных и больших таблицах, которые не умещаются в один экран.

3. Подгрузка внешних данных

С помощью jQuery очень легко подгружать на веб-страницы внешний контент. Его можно вывести прямо в блок DIV, как в примере ниже.

4. Одинаковая высота колонок

Известно, что выровнять блоки по высоте стандартными средствами HTML и CSS не так-то просто. Всего несколько строк кода ниже позволит вам сделать высоту всех блоков равной высоте большего блока.

5. Табличная зебра

Как известно, восприятие и читабельность таблицы будет заметно выше если сделать разноцветное чередование строк. Это очень легко реализуется на jQuery.

6. Частичное обновление страницы

С помощью jQuery очень просто реализовать блочное (частичное) обновление страницы. К примеру, код ниже позволит вам каждые 10 секунд автоматически обновлять блок #refresh.

7. Предзагрузка изображений

Данный код позволяет осуществлять загрузку изображений в фоновом режиме без подгрузок в процессе просмотра страницы. Просто перечислите в 7 строке необходимые вам для предзагрузки изображения.

8. Открытие внешних ссылок в новых окнах/табах

Данный сниппет осуществляет принудительное открытие всех внешних ссылок страницы в новом окне браузера. Скрипт банально определяет текущий домен сайта, и срабатывает если он не совпадает с адресом в ссылке.

9. Блок во все окно браузера

Данный скрипт поможет вам растянуть блок на весь экран браузера. Отлично подойдет для модальных окон и диалогов.

10. Проверка сложности пароля

Если вы позволяете посетителям своего сайта самостоятельно указывать пароли, было бы неплохо проконтролировать его сложность и информировать об этом посетителя.

Для начала напишем HTML-часть кода:

А с помощью кода ниже мы проверим введенный пароль и выведем посетителю информацию: его пароль сложный, средний или слабый, а также проверим не слишком ли он короткий.

11. Ресайз изображений средствами jQuery

Конечно, логичнее изменять размеры изображений на стороне сервера средствами PHP и GD, но бывают ситуации когда это необходимо сделать именно на стороне клиента. И в этом снова нам поможет jQuery.

12. Подгрузка контента при прокрутке страницу вниз

Чаще этот прием называют как бесконечный скролл. Контент подгружается по мере прокрутки пользователем страницы. Это достаточно просто реализовать с помощью кода ниже.