Переосмысление отложенной загрузки с медленной нагрузки XT

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

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

Почему Ленивый Load

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

Ленивый нагрузки не ограничивается изображений.Он может быть использован на страницах со сложными 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 .

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

Ленивый Load XT

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

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

Мы пришли к выводу, что современный полотно может использовать мобильный ориентирован на, быстрый, расширяемый и JQuery на основе решения.Вот почему мы разработали один и назвал его Ленивый Load XT ³¹ ⁵ .

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

Она должна поддерживать JQuery Mobile ⁶ из коробки .
Следует поддерживать jQuery ⁷, Zepto ⁸ и DOMtastic ⁹ библиотеки.Конечно, писать решение в родной JavaScript можно, но JQuery является довольно распространенным расширением JavaScript в настоящее время, и один из наших целей было упростить переход от первоначального Ленивый Load ленивый нагрузки XT.Это делает JQuery адекватный выбор.Однако, если вы don’ т хотите использовать JQuery вообще, читайте в разделе “Требования” ниже за подробной информацией о снижении размера зависит библиотек .
Это должно быть легко начать.Настройки по умолчанию должны работать большую часть времени.Подготовьте HTML, включают в себя наличие и вуаля

Include

Ленивый Load XT требует JQuery 1.7, Zepto 1.0 или DOMtastic 0.7.2.В том числе плагин легко, как и ожидалось:

<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>

Use

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

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

От этого фрагмента, становится ясно, почему мы создали img.lazy выше display: none Скрытие изображения необходимо в случае, если нет JavaScript, или то и другое исходное изображение и заполнитель будет отображаться.Если src атрибут <img> тега не установлен, то плагин будет установлен, чтобы это было прозрачным GIF с помощью data-uri атрибут .

Если вы не беспокоитесь о пользователях, которые отключили JavaScript (или около правильный код HTML5), то просто загрузите jquery.lazyloadxt.min.js и заменить src атрибут в изображениях с data-src:

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

Video

Ленивый Load XT выпускается в двух версиях: jquery.lazyloadxt.js и jquery.lazyloadxt.extra.js.Последнее включает в себя улучшенную поддержку видео элементов, как <video> теги и те, встроенные в <iframe> (например, YouTube и Vimeo) .

Изменения разметки похожи на выше, и заменяя src атрибуты с data-src и post с data-poster достаточно, если вы используете их в <video> элемента .

<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>

Size

Размер jquery.lazyloadxt.min.js файла 2.3 KB (или 1,3 KB в формате gzip), и размер jquery.lazyloadxt.extra.min.js 2,7 KB (или 1,4 KB в формате gzip).Это достаточно маленький,, особенно по сравнению с JQuery и Zepto .

Requirements

Даже если Ленивый Load XT требует JQuery, Zepto или DOMtastic, загрузка полных версий любого из них не является необходимым.Например, DOMtasticтребуется только минимальный набор модулей (attr, class, data, event, selector, type) для вас, чтобы получить 7,9 Kb Файл (или 2,7 KB в формате gzip), в результате чего общий размер как DOMtastic и ленивый нагрузки XT для всего 4 КБ (в формате gzip).

Compatibility

We’ ве испытания Ленивый Load XT в следующих браузерах:

Internet Explorer 6 – 11
Chrome 1 – 37
Firefox 1.5 – 32.0
Safari 3 – 7
Opera 10.6 – 24.0
IOS 5 – 7 (акций браузеры)
Android 2.3 – 4,4 (фондовые браузеры)
Amazon Kindle Fire 2 и HD 8,9 (фондовые браузеры)
Opera Mini 7

Performance

Мы протестировали производительность Ленивый Load XT на страницу с тысяча изображений и доволен результатами: прокрутка работает хорошо, даже на старых Android 2.3 устройств .

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

Options

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

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

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

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

AJAX Support

Если вы используете JQuery мобильный телефон со встроенным в AJAX загрузки страницы, то плагин нагрузки XT Ленивый будет делать все волшебство для Вас в pageshow события.В общем, вы должны выполнить код ниже для инициализации изображения внутри контейнера с AJAX-загруженного содержимого .

$(window).lazyLoadXT();

Или запустить так:

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

Продление Ленивый Load XT

Ленивый Load XT может быть продлен легко с помощью oninit, onshow, onload и onerror обработчики или связанных с lazyinit, lazyshow, lazyload и lazyerror события.Таким образом, вы сможете создавать удивительные дополнения .

Некоторые примеры можно найти на GitHub page ^{Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров}

Главная → Программирование → 03.02.2015 by coding.smashingmagazine.com