Изображения почти везде в сети. Они предоставляют важную информацию, визуальный интерес и важные «точки останова» для пользователей в пределах длинных текстовых фрагментов. Часто изображения являются основным направлением содержания. Это может быть связано с намерением веб-сайта — например, Imgur или Flickr — или просто потому, что слова могут неадекватно объяснить такие вещи, как изображения.
В этом уроке будет обсуждаться, как загружать ленивые изображения, когда вам приходится загружать их много. Почему важно загружать изображения лениво и как это делать так, чтобы это не мешало работе пользователей.
Я также хотел бы предложить вам прочитать учебник SitePoint по оптимизации изображений . Оба эти учебника имеют схожие цели и могут значительно улучшить взаимодействие с пользователем и время загрузки веб-страниц при совместном использовании.
Зачем загружать изображения лениво?
Прежде чем копать глубже, возможно, нам следует сначала спросить, почему вы хотите пройти через все эти неприятности?
Одна из важных причин заключается в том, что это должно значительно сократить время загрузки страницы. Часто сценарии требуют полной загрузки DOM, прежде чем они смогут работать. Если эти сценарии необходимы для предоставления некоторой информации пользователю или для предоставления важной функции, то ожидание от 8 до 10 секунд расстроит пользователей. Большинство пользователей не собираются ждать так долго и оставят ваш сайт для более быстрых.
Еще одним преимуществом является экономия полосы пропускания как для вас, так и для пользователя. Если пользователь не собирается прокручивать первые 10 изображений, загружать их все бесполезно. Допустим, на веб-странице 30 изображений. Даже если каждое из этих изображений имеет размер всего 30 КБ. Экономия полосы пропускания составит 600 КБ на одно попадание на веб-странице. Для сайта с высоким трафиком, например, с 2 миллионами просмотров страниц в месяц, просто ленивая загрузка изображений сэкономит около 1 миллиона мегабайт полосы пропускания.
Настройка плагина
Существует множество плагинов для ленивой загрузки изображений. Для этого урока я собираюсь использовать плагин jQuery Lazy Load . Этот плагин имеет размер около 3,3 КБ и имеет много полезных функций. Вы можете включить минимизированную версию непосредственно в свой код, чтобы сохранить дополнительный запрос или загрузить его из CDN .
Независимо от того, какой плагин вы используете, вам придется внести несколько изменений в разметку. Вы должны добавить атрибуты высоты и ширины ко всем изображениям вместе с классом .lazy Кроме того, вам нужно изменить атрибут srcdata-original Вот как будет выглядеть ваш тег изображения после изменений:
<img class="lazy" data-original="image.jpg" width="640" heigh="480">
Теперь в ваш код JavaScript включите следующий фрагмент:
$("img.lazy").lazyload();
Это все, что вам нужно сделать. Теперь все ваши изображения будут загружаться лениво. Вот демонстрация CodePen: http://codepen.io/SitePoint/pen/WrXjmQ
Делать дальнейшие улучшения
Основная цель преодоления всех этих проблем — дать пользователям почувствовать, что ваш сайт загружается быстро. Чтобы пользователи чувствовали себя таким образом, вам необходимо обеспечить бесперебойную работу.
При использовании плагинов с отложенной загрузкой изображения начинают загружаться только тогда, когда они появляются на экране. Это может немного раздражать пользователей, которые на самом деле прокручивают страницу вниз. Им нужно будет немного подождать, прежде чем каждое изображение загрузится полностью.
Чтобы преодолеть эту проблему, вы можете установить пороговое значение. Таким образом, изображения будут загружаться непосредственно перед отображением в окне просмотра. Если установить разумное значение, например, 500, изображения будут загружены на 500 пикселей до того, как они появятся в окне просмотра. Это обеспечит полную загрузку изображений при прокрутке пользователя вниз.
Если пользователь прокручивает экран очень быстро, он видит серые блоки вместо изображений. Если вам нравится, вы можете установить значение placeholder1x1 При желании вы можете использовать другое изображение в качестве заполнителя, пока не загрузится исходное изображение. Это может быть достигнуто путем установки значения placeholder
Последняя проблема, с которой вы можете столкнуться, заключается в том, что изображения на вашем сайте не имеют фиксированного размера, но реагируют на них. В таких случаях вы можете установить ширину и высоту всех изображений на произвольно большое значение. После этого вы можете применить следующий CSS ко всем изображениям:
.lazy{
max-width: 100%;
height: auto;
}
Другие доступные плагины
Ленивая загрузка изображений полезна для большинства сайтов и становится все более популярной. Это объясняет избыток доступных плагинов, каждый со своими особенностями и зависимостями. Я упомяну два сегодня — JQuery Unveil и Blazy .
jQuery Unveil — это облегченная версия плагина Lazy Load с базовыми функциями. Как следует из названия, это зависит от jQuery для правильного функционирования.
Если вы не используете jQuery на своем веб-сайте, вы можете предпочесть использовать Blazy для отложенной загрузки изображений в чистом JavaScript. Он работает во всех основных браузерах, включая IE + 7.
Если вы решите использовать плагин Lazy Load, который мы обсуждали в этом руководстве, вы можете прочитать больше об этом на официальном сайте . Есть информация о загрузке изображений на основе определенных событий и предоставлении поддержки для браузеров с отключенным JavaScript.
Вывод
В этом уроке мы сосредоточились на загрузке изображений лениво. Хотя в учебном пособии я использовал плагин Lazy Load, вы можете использовать любой плагин, который вам нравится. Что более важно, так это то, что вы следуете основным принципам, которые я упомянул в учебном пособии, таким как настройка порога и т. Д. Таким образом, у вас будет более быстрый веб-сайт и улучшенный опыт для посетителей.
Если вы знаете о других плагинах и советах для ленивой загрузки изображений или у вас есть вопросы, пожалуйста, укажите их в комментариях.