От автора: сегодня интернет полон различных изображений. С их помощью можно передавать критическую информацию, визуально заинтересовать пользователя и они выполняют важную роль «точек отдыха» в длинных текстах. Часто изображения на сайте это основной контент: в случае если изображения являются основным направлением — Imgur или Flickr, к примеру – или просто, потому что слова не могут адекватно передать смысл, в отличие от изображений.
В этом уроке мы рассмотрим метод ленивой загрузки большого количества изображений. Почему так важен этот метод, и как его реализовать таким образом, чтобы он не раздражал пользователей, не докучал?
Также я предлагаю вам прочитать статью с сайта SitePoint Урок по оптимизации изображений. Обе статьи направлены на решение схожих задач и при совместном использовании значительно повышают пользовательский опыт от сайта и время загрузки веб-страниц.
Почему изображения загружаются «лениво»?
Перед тем как продолжим, вы, наверное, зададитесь вопросом, а зачем вообще мне решать эту проблему? Одна из главных причин в том, что этот метод значительно ускорит загрузку страниц. Очень часто скриптам требуется полная загрузка DOM перед началом работы. Если эти скрипты используются для подачи пользователям какой-либо информации или функционала, то ожидание в 8-10 секунд быстро надоест. Большинство пользователей не будут так долго ждать и уйдут с вашего сайта на более быстрые.
Вторая причина это экономия траффика как для вас, так и для пользователя. Если пользователь не собирается пролистывать первые 10 изображений, то и грузить их все бесполезно. Скажем, на странице 30 изображений. Даже если каждое весит 30Кб, то экономия составит 600Кб на одну страницу. Для сайтов с высоким траффиком, к примеру, 2 млн просмотров в месяц ленивая загрузка изображений сэкономит примерно 1 млн Мб.
Установка плагина
Существует множество плагинов по ленивой загрузке изображений. В этом уроке я воспользуюсь jQuery Lazy Load plugin. Весит плагин около 3.3Кб и содержит множество полезных функций. Можно подключить минифицированную версию напрямую в код и снизить количество запросов, а можно загрузить плагин через CDN.
Не имеет значения, какой плагин вы будете использовать, в разметке все равно придется кое-что изменить. Всем изображениям с классом .lazy необходимо добавить атрибуты height и width. Кроме того, необходимо заменить атрибут src на data-original. После всех изменений тег изображения будет выглядеть так:
1 |
<img class="lazy" data-original="image.jpg" width="640" heigh="480"> |
В JavaScript добавьте следующую строку:
1 |
$("img.lazy").lazyload(); |
Больше ничего делать не надо. Теперь все изображения будут загружаться при помощи ленивого метода. Ниже CodePen демо:
Добавим пару улучшений
Основная задача это заставить пользователя чувствовать, что ваш сайт грузится быстро. Необходимо убедиться в том, что у пользователей складывается ощущение «бесшовности» при работе с вашим сайтом.
При использовании плагинов ленивой загрузки изображения начинают загружаться только при появлении на экране. Это может немного раздражать тех пользователей, которые прокручивают страницу в самый низ. Им придется подождать немного, пока каждое изображение загрузится.
Для решения этой проблемы можно задать пороговое значение. В таком случае изображения будут загружаться, как только они попали в видимую область экрана. Установив значение на 500, мы будем загружать 500px изображения перед тем, как оно станет видимым в области просмотра. Такой метод обеспечит полную загрузку всех изображений при прокрутке в самый низ страницы.
Если пользователь очень быстро прокрутит страницы вниз, то перед его глазами появятся серые блоки вместо изображений. По желанию можно установить placeholder со ссылкой на другое изображение 1х1px с цветом, сочетающимся с темой сайта. Также в качестве плейсхолдера можно использовать другие полноценные изображения. Это можно сделать, задав URL к изображению для placeholder через скрипт.
Последняя проблема, с которой вы можете столкнуться заключается в том, что изображения на вашем сайте имеют разный размер, но она адаптивны. В таких случаях ширине и высоте всех изображений можно задать произвольное большое значение. После этого можно добавить следующий CSS код ко всем необходимым изображениям:
1 2 3 4 |
.lazy{ max-width: 100%; height: auto; } |
Другие плагины
Метод ленивой загрузки полезен для большинства сайтов, и он становится все популярнее. Это объясняет такое большое количество плагинов, у каждого из которых свои разные функции и зависимости. Сегодня я упомяну про два плагина – jQuery Unveil и Blazy.
jQuery Unveil – легковесная версия плагина ленивой загрузки изображений с базовым функционалом. Как можно судить по названию, работа плагина зависит от JQuery.
Если вы не используете JQuery на своем сайте, вас может заинтересовать Blazy, написанный на чистом JS. Плагин работает во всех основных браузерах, в том числе и IE+7.
Если вы решили воспользоваться описанным в данной статье плагином, более подробно о нем можно почитать на официальной странице. Там можно найти информацию о загрузке изображений по определенным событиям, а также информацию о поддержке браузеров с отключенным JavaScript.
Заключение
В этом уроке мы рассмотрели метод ленивой загрузки изображений. В своей работе я использовал плагин Lazy Load, однако вы можете воспользоваться любым другим плагином. Самое важное это следовать базовым принципам, о которых я упомянул, как например, пороговое значение и т.д. Таким образом вы ускорите свой сайт и повысите пользовательский опыт. Если вы знаете что-то еще о плагинах и способах ленивой загрузки изображений, или у вас есть вопросы, пишите в комментариях.
Автор: Monty Shokeen
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.