Как создать бесконечную прокрутку при помощи History Web API

Как создать бесконечную прокрутку при помощи History Web API

От автора: в этом уроке мы улучшим свои знания в History Web API. Сегодня мы создадим UX шаблон, который как любят, так и ненавидят: бесконечную прокрутку.

Бесконечная прокрутка это шаблон интерфейса, в котором новый контент подгружается по достижении конца страницы. Если все сделать правильно, то такой шаблон может удерживать внимание пользователя. Из лучших примеров можно привести социальные сети Facebook, Twitter и Pinterest.

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

Создаем демо сайт

Сайт будет представлять собой статичный блог. Его можно написать на чистом HTML или же воспользоваться генераторами статических сайтов типа Jekyll, Middleman или Hexo. Демо урока будет выглядеть вот так:

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Стоит сказать пару слов про HTML структуру.

Из кода выше видно, что тег article должен быть внутри HTML тега с уникальным ID. Для блока-обертки можно взять DIV или тег section. Идентификатор можно назвать как угодно.

Также по ходу статьи нужно будет добавить атрибут data-article-id, в котором будет храниться соответствующий id тега article.

Стили можете написать любые; сделайте страницу поцветнее, более привлекательной, или же можно добавить побольше контента.

Загружаем JavaScript

Первым делом загрузите следующие JS библиотеки именно в таком порядке на все страницы блога.

jquery.js: с помощью этой библиотеки мы будем выбирать элементы, вставлять новый контент, добавлять классы и выполнять AJAX запросы.

history.js: полифил для поддержки History API в браузере.

Наш JQuery плагин

Помимо библиотек нам нужно будет подгружать наш JS файл, где мы будем писать скрипты для бесконечной прокрутки. Для этого мы завернем наш JS код в JQuery плагин, а не будем писать все с нуля, как в предыдущем уроке.

Плагин мы будем создавать с помощью сервиса jQuery Plugin Boilerplate. Сервис похож на HTML5 Boilerplate – коллекция шаблонов, макетов и лучших практик для создания JQuery плагинов.

Скачайте Boilerplate, поместите его в папку сайта со всеми JS файлами (к примеру, /assets/js/) и переименуйте файл в «keepscrolling.jquery.js» (имя придумала Дори из мультика В поисках Немо, ее любимая фраза «плывем дальше»).

Плагин будет очень гибок на варианты и настройки.

Обзор структуры JQuery плагина

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

В первой секции кода мы задаем название плагина «keepScrolling» в верблюжьем стиле. Также у нас есть переменная defaults, в которой будут храниться настройки по умолчанию для плагина.

Дальше идет главная функция плагина Plugin(). Функция сравнима с конструктором, и в нашем случае именно она занимается инициализацией плагина и совмещением настроек по умолчанию с переданными.

В третьем разделе мы будем писать свои функции для бесконечной прокрутки.

Последняя секция заворачивает все в JQuery плагин.

Теперь можно перейти к написанию своего JS кода. А начнем мы с объявления настроек по умолчанию.

Опции

В коде выше, как видно, мы задали три опции:

floor: селектор id — #floor или #footer – нижняя часть веб-сайта или контента. Обычно это футер

article: селектор класса тега article.

data: так как у нас нет доступа к внешним API (наш сайт статический), данные о теге article и его содержимом, например, URL, ID и заголовок необходимо передавать в JSON строке.

Функции

Ниже представлена функция init(). В эту функцию мы будем добавлять ряд функций, которые должны запускаться сразу же после инициализации. К примеру, вы выбрали футер сайта.

Также есть пара функций, который мы будем запускать не из функции инициализации. Мы создадим и добавим их после функции init. Первые функции будут вытягивать или возвращать что-то: что-то из строки, объекта или числа, что можно будет задействовать в других функциях плагина. Среди функций:

Получение всех статей на странице:

Получение адреса статьи. В WordPress адрес называют «post slug».

Получить идентификатор и адрес следующей статьи.

Далее пойдут утилиты плагина: функции, которые будут заниматься чем-то одним. Среди них:

Функция, которая будет показывать, в каком месте элемент входит в область просмотра (становится виден пользователю). Ее мы в основном будем использовать для того, чтобы знать, достигли мы футера или нет.

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

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

Данная функция будет убирать лишние срабатывания прокрутки. Она будет ждать при помощи параметра wait, когда пользователь прекратит прокручивать страницу, и только потом будет запускать функцию.

Функция для продолжения или прекращения операции.

Функцию isProceed() мы будем использовать для проверки прохождения всех условий перед тем, как вытягивать весь контент. Если все нормально, то функция будет запущена, она вытянет новый контент и добавить под крайнюю статью.

Добавьте эту функцию внутрь init. Так функция будет запускаться сразу после инициализации плагина и вытягивать новый контент при соблюдении условий.

Дальше мы добавим функцию, которая будет менять историю браузера. Вот тут нам и понадобится History Web API. Эта функция сложнее предыдущих. Сложный момент заключается в том, как определить момент для изменения истории во время прокрутки, когда менять заголовок документа, а также URL. Ниже представлена иллюстрация, чтобы вы поняли идею:

На рисунке видны три лини: “roof-line”, “mid-line” и “floor-line”, они показывают позицию статьи в окне просмотра. На рисунке видно, что низ первый статьи и верх второй находятся на средней линии. Непонятно на какую статью смотреть: это первый пост или второй? Поэтому нам нельзя менять историю браузера, когда в этой области находятся сразу две статьи.

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

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

Добавьте код ниже:

И последнее, мы создадим функцию, которая будет запускать функции fetch() и history, когда пользователь начинает скролить страницу. Для этого создадим функцию scroller() и будем запускать ее сразу после инициализации плагина.

Как видно из кода, эту функцию мы тоже проверяем на двойное нажатие. Функция отправляет AJAX запросы и меняет историю браузера, а это очень затратные операции.

Добавляем плейсхолдер

Плейсхолдер необязателен, но лучше его добавить. Позаботимся о пользовательском опыте. Плейсхолдер «говорит» с пользователем, показывая ему, что сейчас появится новая статья. Сперва необходимо создать шаблон. Обычно, такие шаблоны вставляются после футера.

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

Со стилями для плейсхолдера нет ничего сложного. Берутся все базовые стили от реальной статьи, @keyframe анимация, симулирующая загрузку, а также добавляются стили для смены видимости (по умолчанию плейсхолдер скрыт; он показывается только, когда у родительского элемента есть класс fetching).

Затем обновляем пару строк и показываем плейсхолдер, пока выполняется AJAX запрос.

Вот и весь плейсхолдер! Плагин готов, осталось его запустить.

Запускаем плагин

С запуском плагина нет ничего сложного. Необходимо найти блок-обертку статьи в блоге и вызвать плагин с заданными настройками.

Бесконечная прокрутка должна заработать.

Проблема с кнопкой назад

В этом уроке мы создали бесконечную прокрутку. Хотя данный метод и удерживает внимание пользователя, у него есть свои минусы: он ломает кнопку назад в браузере. Если кликнуть на нее, она не всегда будет вас возвращать на предыдущий пост или страницу.

Данная проблема устраняется несколькими способами; сайт Quartz, к примеру, переправляет вас на связанный URL; последний посещенный URL, а не записанный с помощью Web History API. Сайт TechInAsia просто возвращается на домашнюю страницу.

Автор: Thoriq Firdaus

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree