Меню
ГлавнаяФото и видео

Бесконечная прокрутка страниц: помогает или вредит? Разбивка на страницы. вариантов ленивой загрузки для изображений

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

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

Преимущество #1: Вовлеченность пользователя и развертывание контента

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

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


Море пинов в Pinterest

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

Новостной фид Facebook: пользователь скроллит еще и еще для обновления контента Преимущество #2: Скроллить лучше, чем кликать

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


Если использовать клики, то каждая порция обновления контента требует дополнительный клик, а также время для загрузки страницы. Для скролла: обновление контента производится непрерывно, нужно всего одно действие. Источник: designbolts Преимущество #3: Скроллинг хорош для мобильных устройств

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

Недостаток #1: Работоспособность страницы и ресурсы устройства

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

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

Недостаток #2: Поиск и местоположение данных

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

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


Интерфейс поиска с бесконечным скроллингом на Etsy. Нынешняя версия построена на пагинации.

Как отмечает Дмитрий Фадеев: “ Люди захотят вернуться к списку результатов поиска, чтобы проверить позиции, которые только что видели, сравнить их с другими продуктами где-то внизу списка. Бесконечный скроллинг не только ломает эту динамику, он усложняет передвижение вниз-вверх по списку, особенно когда необходимо вернуться к странице в другое время, и тебя бросает опять на самый верх, приходится снова прокручивать вниз и ждать загрузки контента. Поэтому интерфейс с бесконечным скроллингом на самом деле медленнее, чем интерфейс с пагинацией”.

Недостаток #3: Нерелевантная полоса прокрутки

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

Полоса прокрутки должна отражать настоящую длину странички Недостаток #4: Отсутствие подвала

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


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

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


Facebook перенес все ссылки из подвала (например, ‘Legal’, ‘Careers’) в панель справа.

Как вариант, для загрузки контента по запросу можно сделать кнопку Load More. Новый контент не будет автоматически загружаться, пока пользователь не нажмет на кнопку. Таким образом, пользователи могут без проблем добраться до подвала.


В Instagram предусмотрена кнопка ‘Load More’, чтобы подвал всегда был доступен пользователям.

Пагинация делит контент на отдельные страницы. Если вы проскроллите вниз страницы и увидите ряд цифр – этот ряд цифр и есть пагинация сайта или приложения.

Преимущество #1: Хорошая конверсия

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

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


Данные результатов поиска Google Преимущество #2: Ощущение контроля

Бесконечный скроллинг – это как бесконечная игра – неважно, как далеко вы прошли, есть ощущение, что вы никогда не дойдете до конца . Когда пользователи знают количество доступных результатов, они могут принять более осмысленное решение, вместо копания в бесконечно обновляемом списке. Дэвид Кирас в своем исследовании “Психология взаимодействия человек-компьютер ” отмечает: “Достижение конечной точки дает ощущение контроля”. Исследование также поясняет, что когда у пользователя есть ограниченные, но релевантные результаты, они могут проще определить, есть ли там то, что они ищут, или нет.

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

Преимущество #3: Положение элемента

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


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

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


На сайте MR Porter для товаров используется пагинация Недостатки: Дополнительные действия

Чтобы перейти на новую страничку, используя пагинацию, пользователь должен найти целевую ссылку (например, “Next”), навести на нее мышкой, кликнуть и ждать, пока загрузится новая страничка.

Для получения контента нужно кликнуть

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

В каких случаях использовать бесконечный скроллинг / пагинацию?

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

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

Заключение

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

Если вы хоть раз заходили на Twitter или искали изображение в Google, вы, вероятно, видели бесконечную прокрутку (бесконечный скроллинг, infinite scrolling) в действии. Вы могли часами прокручивать страницу, конца которой не было.

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

Хотите понять, как бесконечный скроллинг влияет на SEO, и стоит ли вообще использовать его на вашем сайте? Для начала необходимо определиться с тем, что представляет собой этот инструмент.

Преимущества и недостатки бесконечной прокрутки

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

Достоинства бесконечной прокрутки

1. Она удобна для мобильных пользователей

При использовании телефона с сенсорным экраном гораздо проще прокрутить страницу, чем щелкать по маленьким ссылкам.

2. Она позволяет удержать внимание читателя

3. С ее помощью удобнее выводить на экран большие объемы информации

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

4. Она идеальна для сайтов с обновлением информации в режиме реального времени

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

5. Бесконечная прокрутка не доставляет пользователям неудобств, связанных со скоростью загрузки

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

Недостатки бесконечной прокрутки

1. Она осложняет поиск нужной информации

Если читателю потребуется добраться до конкретного элемента содержания на сайте с бесконечным скроллингом, он будет вынужден потратить определенное время на прокрутку страницы. Именно поэтому Google не предлагает пользователям infinite scrolling для ознакомления с результатами поиска.

2. Она не позволяет использовать футер

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

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

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

4. Бесконечная прокрутка увеличивает нагрузку на серверы

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

Как понять, нужна ли вашему сайту бесконечная прокрутка?

Плюсы и минусы бесконечного скроллинга, перечисленные выше, дают вам общее представление об этом инструменте. Если вы все еще не знаете, стоит ли его использовать, ответьте на два вопроса:

1. Ваш бизнес предполагает, что пользователи должны искать товары или услуги на сайте?

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

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

Взять, к примеру, Etsy — крупную площадку для онлайн-торговли. Компания попробовала использовать на своем сайте бесконечный скроллинг, однако получить за счет этого какую-либо выгоду ей не удалось. Главный инженер Etsy Дэн Мак-Кинли (Dan McKinley) не может дать однозначного объяснения данному факту. Вот что он говорит о бесконечной прокрутке:

«Люди крайне чувствительны к любым изменениям интерфейса. Но если алгоритм поиска выводит 16 наиболее подходящих результатов в верхнюю часть списка, infinite scrolling позволяет пользователю, не затрачивая дополнительных усилий, получить «бесконечное» количество менее подходящих результатов (для получения которых в отсутствие системы бесконечной прокрутки ему пришлось бы нажать на соответствующую кнопку).

Я не хочу сказать, что бесконечный скроллинг — это глупость. Данный инструмент способен принести немало пользы, но прежде чем вы решите использовать его, попытайтесь определить, как отреагируют на нововведение пользователи».

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

2. Ваш сайт главным образом предлагает контент?

Если так, вероятно, бесконечная прокрутка — это то, что вам нужно.

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

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

Ресурсы, подобные Inc. или Mashable, зачастую не имеют футера, который вполне успешно заменяет кнопка меню в верхней части страницы. У пользователя, таким образом, появляется выбор: он может мгновенно переместиться к определенному элементу сайта, или же просто прокручивать ленту в поисках интересных материалов.

Как использование бесконечного скроллинга влияет на SEO?

Если вы собираетесь внедрять infinite scrolling, вам стоит узнать о том, как «относятся» к данной затее поисковые системы. Вот что говорит по этому поводу Скотт Лэнгдон (Scott Langdon) из HigherVisibility:

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

Впрочем, с это проблемой можно справиться. Сделать это вам помогут советы Джона Мюллера (John Muller), представляющего Google:

  • На сайте с бесконечной прокруткой должны присутствовать статические ссылки, разбивающие информацию на странице так, чтобы роботы могли правильно ее «понять».
  • Для проведения пагинации (то есть разбивки информации на несколько страниц) компания должна иметь в своем распоряжении систему управления контентом (content management system, CMS).
  • После разделения «бесконечного» содержания на отдельные страницы необходимо удостовериться в том, что каждая из этих страниц имеет полный URL.
  • Также необходимо убедиться в том, что ни один из элементов не попал в состав сразу нескольких страниц.
  • При разделении сайта на несколько частей необходимо вносить изменения в . Когда речь заходит об индексации, любые изменения, внесенные в , игнорируются роботами Google.

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

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

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

    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 (закрывающимся), указываем скрипт:

    Заключение

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

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