Ленивый нагрузка общей шаблон проектирования, что откладывает инициализацию объектов, пока они не нужны.

Ленивые изображения Загрузка начал становиться популярным в Интернете еще в 2007 году, когда Мика Tuupola черпал вдохновение из утилиты YUI ImageLoader и выпустила plugin ¹ .С тех пор, он стал популярным методом для оптимизации загрузки страницы и пользовательский опыт.В этой статье я буду обсуждать почему мы должны и shouldn’ т использовать ленивый Load, и как его реализовать .

Почему Ленивый нагрузки

Изображения составляют более 60% от среднего размера страницы, в соответствии с HTTP-Archive __15 | 2 | __6.Изображения на веб-странице будет оказана только они доступны.Без отложенной загрузки, это может привести к большим объемом трафика данных, который не сразу необходимо (например, изображения за пределами области просмотра) и раз дольше ожидания.Проблема?Посетители не пациент вообще.По отложенной загрузки изображения за пределами области просмотра загружаются только тогда, когда они будут видны пользователю, тем самым экономя ценные данные и время .

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

Почему не лень нагрузки

Ленивый нагрузка не серебряная пуля, и он, как известно, влияют на производительность.Например, большинство ленивый загрузкой реализации либо don’ т есть src атрибут в <img> тегов (что неверный синтаксис, в соответствии со стандартом HTML5) или указывать на пустое изображение (привет, spacer.gif).Этот подход требует дубликаты <img> теги, завернутые в <noscript> тегов для браузеров с JavaScript отключен (или с плагином NoScript установлен):

<img data-src="path" attributes /><noscript><img src="path" attributes /></noscript>

К счастью, это дублирование не увеличивает размер страницы значительно, когда вы включить сжатие Gzip.Тем не менее, некоторые поисковые системы не может индексировать ваши изображения правильно, потому что <noscript> тег не индексируется в пределах содержания, и <img> тег вне <noscript> имеет в виду пустого изображения.В настоящее время Google, кажется, в конечном счете, индекс ленивым загружены изображения, но другие поисковые системы, менее вероятно, .

Как Реализовано ленив Загрузка

Вы могли бы быть ошеломлены количеством плагинов ленивый нагрузки там.Вы также можете подумать, что внедрение одного просто: мониторинг прокрутки страницы (или изменение размеров), а затем установите src атрибут, когда изображение является видимым.Если бы только это было так просто.Многие вещи приходят в игру, когда строительство твердый раствор, который работает на настольных и мобильных устройств.Итак, как вы отделить сигнал от шума

• ThrottlingПроверка видимостиизображений после каждого взаимодействия (даже чуть-чуть прокрутки) может поставить под угрозу оперативность страницы.Для простоты, что, осуществлять какой-то механизм дроссельного .
• Все мобильный являются принадлежат usТам нет scroll событие в браузере Opera Mini и некоторых старых моделей телефонов.Если вы получаете трафик с этих устройств, вы должны контролировать и загрузить все изображения непосредственно .
• ? Нагрузки Ленивый или автоматическая нумерация страниц Некоторые реализации только проверить ли изображение выше сгиба.Если страница прокручивается вниз до самого дна с помощью якоря (или scrollTo метода в JavaScript), то все изображения ниже складки начнут качать, а только изображениях в пределах видового экрана.Это более важно, автоматического разбиения на страницы, потому что пользователи должны будут ждать остальных изображений, чтобы загрузить после взаимодействия .
• Динамическое изображение insertionМногие веб-сайты используют AJAX навигации в настоящее время.Это требует плагин ленивый нагрузки для поддержки динамическую вставку изображений.Чтобы предотвратить утечку памяти, любые ссылки на изображения, которые не в DOM (например, те, которые появляются после AJAX основе замены содержимого) также должны быть удалены автоматически .

Этот список, конечно, не является исчерпывающим.У нас есть еще много вопросов, чтобы рассмотреть, например, как отсутствие getBoundingClientRect в старых браузерах, изменение ориентации без последующего resize события на iPhone, или конкретных требований обработки в рамках JQuery Mobile .

К сожалению, большинство плагинов не обрабатывать все выше .

Ленивый нагрузки XT

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

С нашего последнего проекта, RESS.io __31 | | 4__22 мы работаем на простого решения для автоматического улучшения производительности отзывчивый дизайн на всех устройствах.Ленивый нагрузка стала неотъемлемой частью проекта, но мы пришли к пониманию, что текущая реализация ленивый нагрузки недостаточно для растущих потребностей современного Интернета.Ведь это не только о настольных, мобильных и изображений больше, но все больше и больше о других средствах массовой информации, а также, особенно видео (ох, и я не слышал кто-то сказал “виджеты социальных медиа”?) .

Мы пришли к выводу, что современный веб могут использовать мобильный ориентированной, быстрый, расширяемый и JQuery на основе решения.Вот почему мы разработали один и назвал его Ленивый нагрузки XT ^{31 5} .

Вот ее основные принципы, которые считают текущие и будущие приложения:

• Она должна поддерживать JQuery Mobile ⁶ из коробки .
• Следует поддерживать jQuery __22 | 7 , Zepto ^{8 | __2 и DOMtastic __34 | | 9__1} библиотеки.Конечно, писать решение в родной JavaScript можно, но JQuery является довольно обычным расширением JavaScript в настоящее время, и один из наших целей было упростить переход от первоначального Ленивый Load ленивый нагрузки XT.Это делает JQuery адекватный выбор.Тем не менее, если вы don’ т хотите использовать JQuery вообще, читать “Требования” раздел ниже для подробной информации о снижении размера зависит библиотеки .
• Она должна быть легко начать.Настройки по умолчанию должны работать большую часть времени.Подготовьте HTML, включают наличие и вуаля

<script src="jquery.min.js"></script>
<script src="jquery.lazyloadxt.min.js"></script>

<script>$.lazyLoadXT.extend({edgeY: 200});</script>

<style>img.lazy {display:none}</style>

<img class="lazy" data-src="path" [attributes] /><noscript><img src="path" [attributes] /></noscript>

<script src="jquery.min.js"></script>
<script src="jquery.lazyloadxt.min.js"></script>
<img data-src="path" [attributes] />

<script src="jquery.lazyloadxt.extra.js"></script>

<iframe data-src="//www.youtube.com/embed/[videocode]?rel=0" width="320" height="240"></iframe>

<video data-poster="/path/to/poster.jpg" width="320" height="240" controls>
   <source data-src="/path/to/video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
   <source data-src="/path/to/video.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>

<video data-src="/path/to/video2.mp4" width="320" height="240" controls>

Мы также успешно протестировали различные итерации Ленивый Load XT на более чем тысячу сайтов в течение нескольких месяцев в нашем JQuery Mobile, основанной Элегантность и плоским templates ¹⁰ .

Options

Настройки по умолчанию плагин может быть изменен с $.lazyLoadXT объекта:

$.lazyLoadXT.edgeY = 200;
$.lazyLoadXT.srcAttr = 'data-src';

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

Ленивый нагрузки XT поддерживает много вариантов и событий, что позволяет интегрировать другие плагины или реализации новых функций.Для получения полного списка и деталей см Ленивый нагрузки XT-х GitHub page __49 | | 11__34 .

$(window).lazyLoadXT();

$('#ajaxContainer').lazyLoadXT();

Некоторые примеры могут быть найдены на GitHub page __67 | | 12__34 вместе с
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров