Бесконечная прокрутка (скроллинг): «за» и «против. Бесконечная прокрутка Супер плагин WordPress

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

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

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

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

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

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

Если ваш веб-ресурс показывает статьи или предоставляет для посетителей различные функции при помощи JavaScript, то обязательно требуется загружать . Как правило, скрипты перед выполнением нуждаются в загрузке объектной модели документа. Поэтому на сайте, содержащем изобилие фотографий и прочих изображений, lazy loading играет ключевую роль в том, останется посетитель на нем, или же сразу отправится на поиски конкурентов.

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

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

Разновидности ленивой загрузки

Скроллинг. Контент, не попадающий в видимую зону, загружается только после того, как посетитель ознакомится с изначальным материалом, уже загруженным, и прокрутит страницу вниз. Данный вариант асинхронной загрузки вы можете встретить в социальных сетях, где лента новостей никогда не заканчивается, а также в некоторых онлайн-ресурсах СМИ, интернет-магазинах и каталогах товаров и услуг. Применяя «бесконечный» скроллинг, важно обеспечить грамотную навигацию к главному меню, установив фиксированную панель или кнопку «наверх».

Клик. Контент будет загружаться после нажатия пользователем на специальную ссылку по типу «подробнее». Еще примеры загрузки «по клику»: появление модальных окон и открытие полномасштабного изображения после нажатия на миниатюру. Данный метод отображения информации самый распространенный, однако он редко интересует пользователей. Если материал все же заинтересует посетителя или он очень важен для поисковиков, а скрыть его нужно только чтобы сэкономить пространство, то лучше внедрить функцию через стандартный JS, а не AJAX. Так контент будет загружаться, а отображаться лишь после нажатия.

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

Как сделать ленивую загрузку?

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

5 вариантов ленивой загрузки для изображений

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

В упрощенной версии данный скрипт ленивой загрузки представляет собой замену атрибута src на data-src в теге img :

Элементы img , содержащие атрибуты data-src , скрыты в . После того, как картинки будут загружены, они плавно отображаются с применением переходов:

Img { opacity: 1; transition: opacity 0.3s; } img { opacity: 0; }

Затем JavaScript передает всем тегам img атрибут src , которые в итоге получают значение атрибута data-src . После загрузки всех изображений, data-src убирается из img :

ForEach.call(document.querySelectorAll("img"), function(img) { img.setAttribute("src", img.getAttribute("data-src")); img.onload = function() { img.removeAttribute("data-src"); }; });

Еще David Walsh предусмотрел фолбек в случае несрабатывания JavaScript, отличающийся эффективностью и простой реализацией. Однако его функции не предусматривают загрузку при скроллинге веб-страницы. Это значит, что браузер подгружает все изображения вне зависимости от того, «дошел» посетитель до них, либо нет. Да, фолбек позволяет показывать страницу быстрее, потому что картинки загружаются после HTML, однако экономии трафика не будет.

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

Прогрессивное улучшение обладает несколькими преимуществами:

Техника актуальна как в случае отключенного, так и сломанного JS. Это важно, ведь скрипты часто подвергаются ошибкам.

Она предоставляет юзерам простой доступ к материалам ресурса.

Для реализации метода нет необходимости в использовании плагинов и фреймворков.

Ленивая загрузка функционирует посредством скроллинга – фото не загрузятся, пока посетитель не докрутит страницу до соответствующего места.

Детальную информацию о решении Osborne можете узнать .

№3. Плагин bLazy.js на простом JS

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

Ленивую загрузку фоновых и добавляемых изображений.

Поддержку устаревших браузеров, в том числе IE 7 и 8 версии.

Загрузку картинок в прокручиваемом контейнере.

Использование CDN для размещения плагина вне сервера.

Загрузку всех элементов, содержащих атрибут src: скриптов, iframe и прочего.

Асинхронную загрузку фотографий с учетом разрешения и размера экрана.

Стандартная реализация. Разметка:

Тег img требуется поменять:

Добавить класс.b-lazy.

В виде значения src применить плейсхолдер. Сэкономить число запросов на сервер помогут прозрачные инлайновые gif с кодом base . Но учтите, что на других страницах, где будут применяться те же изображения, не будет кэширования.

Data-src показывает на картинку, которую требуется асинхронно загрузить.

JavaScript: укажите стандартный вызов bLazy и осуществите настройку объекта по карте опций:

Var bLazy = new Blazy({ //опции });

№4. Плагин Lazy Load XT jQuery

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

Для использования плагина на сайте, нужно перед закрывающим тегом добавить jQuery-библиотеку, указав jquery.lazyloadxt.js (упрощенная версия) или jquery.lazyloadxt.extra.js (расширенная):

Есть также альтернативный вариант, позволяющий не использовать весь плагин – облегченный скрипт jqlight.lazyloadxt.min.js :

В изображениях замените src на атрибут data-src :

Плагин может активироваться автоматически, либо вы можете сделать это самостоятельно. Для этого просто введите:

$(elements).lazyLoadXT();

Lazy Load XT jQuetry добавляет большое количество аддонов. К примеру:

Добавив jquery.lazyloadxt.spinner.css , в процессе загрузки картинки есть возможность показывать анимированный спиннер.

Подключив для сайта animate.min.css и указав в JS-файле $.lazyLoadXT.onload.addClass = ‘animated bounceOutLeft’; можно добавить из Animate.css различные эффекты для загрузки картинок.

Плюсы техники:

Работает с большим количеством браузеров.

Поддерживает CDN, поэтому скрипты можно не загружать на сервер.

Дает возможность асинхронно загружать медиа многих типов.

Аддоны позволяют создавать красивые переходы, лениво загружать фоновые картинки и прочее.

Изобилие вариантов использования lazy loading – на странице, в макетах со скроллингом по горизонтали или вертикали, в контейнере и т.д.

Если не желаете задействовать весь плагин, можно подключить облегченный скрипт.

В материалах сообщается, как действовать в случае отключения в браузере JavaScript.

Просмотреть все аддоны и варианты можете по этой ссылке .

№5. Размытое изображение от Craig Buckler

Вы наверняка замечали на некоторых сайтах, как основное изображение статьи сначала размытое, а потом загружается четкая картинка высокого качества. Есть несколько вариантов загрузки фотографий методом размытого эффекта. Один из лучших – Craig Buckler.

Преимущества техники заключаются в:

Высокой производительности: чуть больше 1 байта JS-кода и 463 байта CSS.

Независимости от фреймворков и библиотек.

Поддержке ретина экранов.

Применении прогрессивного улучшения для сломанного JavaScript и устаревших браузеров.

Скачать код вы можете с хранилища сайта GitHub .

Для начала нужно подключить библиотеку jQuery:

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

Портфолио Показать еще...

Все довольно просто и понятно. Но нужно уделить внимание div с id=»smartPortfolio» , , потому что они находятся в важнейшем скрипте, отвечающем за загрузку контента со сторонних документов. «Контейнером» портфолио выступает SmartPortfolio. MoreButton – кнопка, нажимая на которую происходит загрузка еще одного фрагмента портфолио. LoadingDiv – часть страницы, где будет отображаться текст в случае полного открытия портфолио или возникновения какой-либо ошибки.

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

Вот и сам скрипт, для подключения которого нужно вставить код перед закрывающимся тегом body :

Var lazyload = lazyload || {}; (function($, lazyload) { "use strict"; var page = 2, buttonId = "#moreButton", loadingId = "#loadingDiv", container = "#smartPortfolio"; lazyload.load = function() { var url = "./pages/" + page + ".html"; $(buttonId).hide(); $(loadingId).show(); $.ajax({ url: url, success: function(response) { if (!response || response.trim() == "NONE") { $(buttonId).fadeOut(); $(loadingId).text("Портфолио полностью загружено"); return; } appendContests(response); }, error: function(response) { $(loadingId).text("К сожалению, возникла какая-то ошибка при запросе. Пожалуйста, обновите страницу."); } }); }; var appendContests = function(response) { var id = $(buttonId); $(buttonId).show(); $(loadingId).hide(); $(response).appendTo($(container)); page += 1; }; })(jQuery, lazyload);

В структуре веб-ресурса страницы, откуда будут браться данные для загрузки при нажатии, находятся в папке pages . В ней 3 файла, последний из них пустой. Так предусмотрено логикой скрипта. Путь в нем имеет следующий вид:

Var url = "./pages/" + page + ".html";

Но при использовании иного пути важно заменить его в самом скрипте. То же самое нужно сделать, если вы применили другие ID:

ButtonId = "#moreButton", loadingId = "#loadingDiv", container = "#smartPortfolio";

Затем, как и упоминалось раньше, перед тегом body (закрывающимся), указываем скрипт:

Заключение

Ленивая загрузка позволяет ускорить производительность сайта и существенно сэкономить трафик за счет того, что объекты, находящиеся вне зоны видимости окна браузера, загружаются только после того, как это понадобится пользователю. Благодаря разнообразию видов асинхронной загрузки и вариантов ее внедрения, ее можно применять для различных типов веб-сайтов и их целевого трафика.

Есть вопросы? Напиши комментарий!

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

Бесконечная прокрутка записей плагин WordPress

Установить Супер плагин Ajax Load More – Infinite Scroll вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины – Добавить новый , введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

Для начала нужно настроить основные параметры:

– Container Type, здесь можно изменить тип контейнера, но не обязательно.

– Disable CSS, можно отключить CSS стили плагина, чтобы использовать свои стили. Не обязательно.

– здесь вам нужно выбрать стиль загрузки контента. У вас на выбор два варианта – кнопка или бесконечная прокрутка. Нажмите по полю “Chasing Arrows”, чтобы выбрать подходящий для вас вариант.

– Button Classes, можно добавить классы для кнопки. Не обязательно.

– Ajax Security, защита URL адресов от злоупотребления Ajax запросов. Рекомендуется включить.

– Top of Page, на начальной странице загрузки, переместить окно браузера пользователя в верхнюю часть экрана. Это может помочь предотвратить загрузку ненужных сообщений.

– Dynamic Content, отключить динамическое население категорий, тегов и авторов в шорткод Builder. Рекомендуется, если у вас есть необыкновенное количество категорий, тегов и / или авторов.

– Editor Button, можно скрыть кнопку для создания шорткодов из визуального редактора WordPress, на странице редактирования записи или страницы.

– Error Notices, уведомления об ошибках. Рекомендуется включить.

– Сохраните настройки .

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

Что в первом, что и во втором варианте, настройки абсолютно одинаковые, сейчас мы их разберём:

– Template, шаблон оставьте по умолчанию, ничего менять здесь не надо.

– ID, если вы собираетесь добавлять бесконечную прокрутку на несколько страниц, с разными типами вывода записей, то вам нужно указать здесь уникальный идентификатор, чтобы шорткоды отличались. Нажмите под полем на вкладку – Generate Unique ID, чтобы добавить уникальный ID.

– Container Type, можно указать тип контейнера. Не обязательно.

– Container Classes, можно добавить классы для контейнера, не обязательно.

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

– здесь можно указать надпись, которая отображается на кнопке во время загрузки контента.

– Images Loaded, загружать изображения перед загрузкой основного содержимого. Не обязательно включать данную функцию.

– Pause, не загружать сообщения пока пользователь не нажмёт на кнопку.

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

– Scroll Distance, расстояние от нижней части экрана, чтобы вызвать загрузку сообщений. (По умолчанию = 150)

– Maximum Pages, максимальное количество страниц для загрузки во время прокрутки. (0 = без ограничений)

– Pause Override, разрешить прокрутку, чтобы переопределить параметр Pause и запустить загрузку сообщений при прокрутке.

– Transition Type, можно выбрать стиль загрузки перехода.

– Transition Speed, скорость перехода в миллисекундах.

– Transition Container, удалить контейнер загрузки, не рекомендуется!

– Destroy After, удалить ajax загрузку после загрузки определённого количества страниц (укажите количество в поле). Не обязательно!

– Posts Per Page, укажите здесь сколько будет загружаться записей или страниц за один раз.

– Post Type, выберите здесь, какие типы записей вы хотите добавить в бесконечную прокрутку.

– Post Format, можно выбрать формат сообщений. Выберите стандартный формат, для вывода значений по умолчанию.

– Category, можно включить или исключить определённые категории. Ничего не выбирайте, тогда будут использоваться все категории.

– Date, можно указать дату, для запроса по дате архива, чтобы выводились записи из определённого архива. Не обязательно.

– Custom Fields (Meta_Query), можно выводить определённые пользовательские поля, указав здесь их данные. Не обязательно! Оставьте без изменений!

– Search Term, здесь можно указать слово или слова, по которым будут выводиться записи. То есть, если в записи есть такое слово, значит запись будет показана. Не обязательно!

– Post Parameters, здесь можно включить или исключить определённые записи, указав их ID. Можно выбрать статус записи, например, опубликованные или нет.

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

– Offset, здесь можно задать смещение. Например, если указать 5, то первые 5 записей будут пропущены.

– Custom Arguments, через точку с запятой список разделенных пользовательских значений. Могут быть использованы для запроса по параметрам, не доступных в шорткоде. Не обязательно!

Шорткод необходимо добавить на страницу, где будет бесконечная прокрутка. Если в шорткоде вы выбрали тип записей post, то в бесконечной прокрутке будут выводится последние записи и т.д. Всё очень просто! Плагин лично проверял, всё работает! Декабрь 22, 2018 автором: Илья Журавлёв

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

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

Например, Google использует разбиение на страницы вместо бесконечной прокрутки, и это очень удобно. А социальные сети, такие как Twitter и Facebook всегда будут предпочитать использование бесконечной прокрутки, так как никто не любит каждый раз кликать, чтобы просто прокрутить свою ленту новостей.

Что такое метод бесконечной прокрутки?

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

Лучшее использование этой техники можно найти в Twitter , Facebook и многих других ресурсах.

Ниже приводится список, состоящий из 10 лучших jQuery-плагинов бесконечной прокрутки (скролла ).

10 лучших jQuery-плагинов бесконечной прокрутки:

Если вы решили использовать jQuery-плагин бесконечной прокрутки, мы упростим вам задачу. Рассмотренные ниже 10 jQuery-плагинов бесконечной прокрутки поддерживают все функции, которые могут вам понадобиться – просто выберите наиболее подходящий именно для вашего сайта, чтобы сделать пользовательский интерфейс более эффективным и удобным.

jQuery Masonry

Masonry размещает элементы в доступном вертикальном пространстве. Очень популярный плагин с почти 13 000 звезд на github .

Демо-версия Скачать

iScroll

Хотите создать плавную бесконечную прокрутку? iScroll определенно поможет вам создать плавный jquery- скролл . Благодаря интеллектуальной системе кеширования вы сможете создавать бесконечную прокрутку для реализации надежного пользовательского интерфейса. Кроме jQuery , он поддерживает и javascript .

Демо-версия Скачать

WayPoints

WayPoints упрощают реализацию функций прокрутки страницы. С помощью этого простого плагина можно преобразовать навигацию типа «Предыдущая / Следующая » в бесконечно прокручиваемый AJAX -интерфейс . Для WayPoints доступна подробная документация, поэтому его практическое применение не будет сложной задачей.

Демо-версия Скачать

Infinite-Scroll.js

Очень компактный jQuery-плагин бесконечный прокрутки. Infinite Scroll автоматически добавляет следующую страницу, позволяя не загружать все страницы сразу.

Демо-версия Скачать

jScroll

jScroll — простой в использовании jQuery-плагин для бесконечной прокрутки, дающий возможность осуществлять гибкую настройку.

Демо-версия Скачать

jQuery-Endless-Scroll

Этот плагин никогда не позволит вашим пользователям затормозить, находясь в ожидании загрузки новой страницы. jQuery-Endless-Scroll очень гибкий, он включает в себя действительно уникальные функции, такие как добавление дружественных URL-адресов , усечение данных, возможность прокрутки и добавления контента в начало страницы.

Демо-версия Скачать

Infinite AJAX Scroll

Infinite AJAX Scroll — это интеллектуальный jQuery-плагин бесконечной прокрутки. Он может преобразовать существующую систему разбиения на страницы в систему бесконечной прокрутки. Данный плагин считывает на сервере ссылки «следующая / предыдущая» существующей страницы и, когда пользователь достигает ее окончания, загружает эти страницы с помощью AJAX .

Этот подход также оптимизирован с точки зрения SEO и очень прост в реализации.

Демо-версия Скачать

JQuery-ESN-Autobrowse

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

Демо-версия Скачать

JQuery Infinite Scroll

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

Демо-версия Скачать

Endless.JS

Endless.js — это jQuery-плагин , который помогает создавать бесконечные прокрутки (скроллы ) для HTML-элементов . Он соединяет нижнюю часть с верхней или левую секцию с правой, создавая тем самым иллюзию бесконечной прокрутки.

, на примерах демонстрирует достоинства и недостатки популярного приёма — бесконечного скроллинга.

Представить большое количество информации, например, результаты поисковой выдачи, ссылки, статьи или изображения, удобным для пользователей способом может быть довольно сложно. В прошлом эту проблему решали благодаря надёжному механизму пагинации . Однако за прошедшие пару лет многие сайты перешли на бесконечный скроллинг . Бесконечный скроллинг — это механизм, согласно которому следующая «страница» с данными автоматически загружается по мере того, как пользователь до конца прокручивает предыдущий блок.

Иногда этот подход оказывается очень эффективным, иногда — крайне неудачным . Вот несколько преимуществ и недостатков бесконечного скроллинга:

Преимущества

Эффективное использование пространства экрана. Больше никаких неуклюжих кнопок или ссылок с номерами страниц.

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

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

Недостатки

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

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

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

Прощай, футер! Либо бесконечный скроллинг, либо футер — третьего не дано. Если вам (или, что важнее, вашим пользователям) нужен футер, стоит подумать о более привычном шаблоне. Не дразните пользователей футером, по которому нельзя кликнуть: стоит ему появиться перед глазами, как на его месте тут же возникает новый контент (LinkedIn и Facebook, я говорю о вас!)

SEO. Хотя в Google отмечают, что их алгоритм принимает в расчет страницы, которые содержат множественные версии (например, учитывает «Страницу-1», «Страницу-2» наряду со страницей «Посмотреть все» и т.д.), отказываясь от тестирований, вы рискуете «уронить» сайт в поисковых системах.

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

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

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

Шаг 2. Разметка HTML

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

Вэб галерея| Бесконечная прокрутка

Показано 9 изображений | Вверх

Шаг 3. CSS

CSS также весьма прост.

Body{ background:#222; color:#666; } #header{ font-family:Arial, Helvetica, sans-serif; font-size:24px; font-weight:bold; text-align:left; text-indent:35px; margin: 0 auto; width:800px; margin-bottom:10px; } hr{ margin: 20px; border:none; border-top: 1px solid #111; border-bottom: 1px solid #333; } p{ color:#444; text-align:left; font-size:10px; margin-left: 20px; margin-bottom: -10px; } a{ color:#444; }

Шаг 4.

Теперь добавим немного CSS3 для скругления углов и вывода теней. Нужно испоьзовать -moz-box-shadow и -moz-border-radius для Firefox и -webkit-box-shadow и -webkit-border-radius для Chrome и Safari.

#container{ margin: 0 auto; width:800px; border:1px solid #333; -moz-border-radius: 10px; -webkit-border-radius: 10px; font-family:Verdana, Geneva, sans-serif; text-align:center; } img{ border:10px solid #444; -moz-border-radius: 5px; -webkit-border-radius: 10px; margin: 15px; } img:hover{ border-color:#555; -moz-box-shadow: 0px 0px 15px #111; -webkit-box-shadow: 0px 0px 15px #111; }

Шаг 5. PHP скрипт

Он будет очень коротким. Нужно вызвать PHP скрипт с индексом следующего изображения которое нам нужно в качестве параметра. Первым делом мы должны взять все имена изображений из папки и сохранить их в массиве. Для хранения изображений организовано две папки: thumb и img , которые содержат миниатюры и полноразмерные изображения, соответстенно. Миниатюры должны иметь абсолютно точно такие же имена, как и полноразмерные изображения.

Как уже упоминалось, изображения группируются в наборы из трех строк, каждая их которых сожержит по три изображения. Таким образом нам надо вернуть только девять имен изображений для группы. Мы начинаем от индекса, который получили в качестве параметра, $n , и заканчиваем $n+9 . На каждом шаге цикла мы добавляем имя изоображения и ";" после него в строку возвращаемого текста. Здесь есть небольшой трюк. Нам не нужно бесконечное количество номеров изображений. Чтобы создать эффект бесконечной галереи, которая никогда не кончается, каждый раз индекс следующего изображения должен быть больше общего количества изображений и мы должны начинать с начала. Это выполняется с помощью функции % (деление по модулю) идекса и общего количества изображений.

$i%count($files)

В результате мы получаем остаток от деления. Например, если индекс $i count($files) составляет 45, результат будет 5. А если если индекс $i равен 50 и количество изображенийcount($files) составляет 65, то результат будет 50. В завершении мы возвращаем текст ответа.

Шаг 7

Здесь приведен полный текст PHP скрипта. Его нужно разместить в новом файле .php .

Шаг 8. JavaScript

Определим несколько переменных, которые понадобятся в дальнейшем:

Var contentHeight = 800; var pageHeight = document.documentElement.clientHeight; var scrollPosition; var n = 10; var xmlhttp;

Для определения момента, когда полоса прокрутки будет находиться внизу страницы, нам нужно определить три переменные:

• contentHeight - высота изначальной галереи
• pageHeight - высота видимой страницы в браузере
• scrollPosition - положение полосы прокрутки, отмеренное сверху

Также нам нужна будет переменная для хранения индекса следующего изображения (который мы передаем в PHP скрипт), и переменная для объекта запроса Ajax.

Шаг 9

Нужно определить функцию, которая будет добавлять изображения к нашему HTML контейнеру.

Function putImages(){ if (xmlhttp.readyState==4){ if(xmlhttp.responseText){

Объект запроса изменяет свои состояния в ходе выполнения запроса. Каждое состояние ассоциируется с числовым значением. Нам интересно окончательное состояние, когда запрос завершен и значение равно 4. Сначала мы проверяем, находится ли запрос в нужном состоянии и затем проверяем, получили мы ответ или нет.

Шаг 10

Если оба условия выполнены, мы должны обработать возвращенный текст. Это означает, что мы должны разделить имена фалов и поместить их в массив. PHP скрипт возвращает единичную строку с именами, разделенными точкой с заптятой, напрмер: "Achievements.jpg;Bw.jpg;Camera.jpg;Cat-Dog.jpg;CREATIV.jpg;creativ2.jpg;Earth.jpg;Endless.jpg;EndlesSlights.jpg;"

Var resp = xmlhttp.responseText.replace("\r\n", ""); var files = resp.split(";");

Нужно решить маленькую проблему. Текст ответа может содержать символ начала новой строки на первой позиции. А он нам не нужен. Задачча легко решается с помощью функции replace , которая принимает два параметра: "\r\n" - символ новой строки, и "" - пустую строку, которая заменяет все проявления первого параметра. Теперь остается только разделить строку по символу ";".

Шаг 11.

Теперь добавляем изображения в наш контейнер.

Var j = 0; for(i=0; i