Переосмысление ленивых загрузки с ленивым нагрузки XT

Ленивая загрузка — это общий шаблон проектирования программного обеспечения, который откладывает инициализацию объектов до тех пор, пока они не понадобятся. Ленивые загрузки изображений начали становиться популярными в Интернете еще в 2007 году, когда Мика Tuupola черпал вдохновение из YUI ImageLoader утилиты и выпустила плагин j’sry.

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

Дальнейшее чтение на SmashingMag:

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

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

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

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

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

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

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

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

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

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

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

Мы пришли к выводу, что современная сеть может использовать мобильное, быстрое, расширяемое и основанное на j’sry решение. Вот почему мы разработали один и назвал его Ленивый Нагрузка XT.

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

Он должен поддерживать j’s’ry Mobile из коробки.
Он должен поддерживать библиотеки j’ery, Цепто и DOMtastic. Конечно, написание решения в родном JavaScript возможно, но j’sry является довольно распространенным расширением JavaScript в настоящее время, и одной из наших целей было упрощение перехода от оригинальной Lazy Load к Lazy Load XT. Это делает j’s’ry адекватным выбором. Однако, если вы не хотите использовать j’query вообще, прочитайте раздел «Требования» ниже для получения подробной информации о сокращении размера зависимых библиотек.
Это должно быть легко начать. Настройки по умолчанию должны работать большую часть времени. Подготовьте HTML, включите JavaScript, и вуаля!

Включают

Ленивый Груз XT требует j’ery 1.7 «, Цепто 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>

Использовать

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

Видео

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

Размер

Размер jquery.lazyloadxt.min.js файла составляет 2,3 кБ (или 1,3 КБ Gzip’ed), а размер jquery.lazyloadxt.extra.min.js 2,7 кБ (или 1,4 КБ Gzip’ed). Это достаточно мало, особенно по сравнению с J’Ery и Цепто.

Требования

Несмотря на то, что Lazy Load XT требует j’ery, Зепто или DOMtastic, загрузка полных версий любого из них не требуется. Например, DOMtastic требует только минимальный набор модулей attr, class, data, event, selector, type () для вас, чтобы получить 7,9 КБ файл (или 2,7 КБ Gzip’ed), в результате чего общий размер как DOMtastic и Lazy Load XT только 4 КБ (Gzip’ed).

Совместимости

Мы протестировали Lazy Load XT в следующих браузерах:

Internet Explorer 6 — 11
Хром 1 — 37
Огненный слит1.5 — 32,0
Сафари 3 — 7
Опера 10.6 — 24.0
iOS 5 — 7 (фондовые браузеры)
Android 2.3 — 4.4 (фондовые браузеры)
Amazon Kindle Fire 2 и HD 8.9 (фондовые браузеры)
Опера Мини 7

Производительности

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

Мы также успешно протестировали различные итерации Lazy Load XT на более чем тысяче веб-сайтов в течение нескольких месяцев в наших шаблонах Elegance и Flatна основе j’ery Mobile.

Параметры

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

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

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

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

Поддержка AJAX

Если вы используете j’s’ru Mobile со встроенной загрузкой страницы AJAX, то плагин Lazy Load XT сделает все волшебство для вас в pageshow случае. Как правило, следует запустить приведенный ниже код для инициализации изображений внутри контейнера с загруженным AJAX контентом.

$(window).lazyLoadXT();

Или запустить это:

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

Расширение ленивой нагрузки XT

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

Некоторые примеры можно найти на странице GitHub,наряду с инструкциями по использованию. Мы выделим только некоторые из них здесь.

Анимация загрузки

Настройка анимации загрузки изображений очень проста. По умолчанию Lazy Load XT включает в себя анимацию spinner и fade-in, но вы можете использовать любые эффекты от проекта Animate.css или любого другого.

Отзывчивые изображения

Lazy Load XT имеет два дополнения для отзывчивых изображений. Одним из них является «srcset», чтобы полить srcset атрибут (и это должно быть переименовано): data-srcset

<img data-srcset="image-hd.jpg 2x, image-phone.jpg 360w, image-phone-hd.jpg 360w 2x">

Второй является «картинка», полизаполнение для <picture> тега:

<picture width="640" height="480">
   <br data-src="small320.jpg">
   <br media="(min-width: 321px)" data-src="medium480.jpg">
   <br media="(min-width: 481px)" data-src="large640.jpg">
   <noscript><img src="large640.jpg"></noscript>
   <p>Image caption</p>
</picture>

Страница Виджеты

Lazy Load XT позволяет ленивым загружать виджеты страниц (например, Facebook, Twitter или любой виджет вам нравится). Вставьте любой HTML-код на странице, используя надстройку «widget», когда элемент становится видимым. Оберните код в HTML-комментарий внутри <div> атрибута идентификатора и придайте элементу data-lazy-widget атрибут со значением этого идентификатора:

<!-- Google +1 Button -->
<div data-lazy-widget="gplus" class="g-plusone" data-annotation="inline" data-width="300"></div>
<div id="gplus"> <!--

   (function() {
      var po = document.createElement('script'),
      s = document.getElementsByTagName('script')[0];
      po.type = 'text/javascript'; po.async = true;
      po.src = 'https://apis.google.com/js/platform.js';
      s.parentNode.insertBefore(po, s);
   })();

--></div>

Если data-lazy-widget атрибут имеет пустое значение, то сам элемент будет использоваться в качестве обертки:

<div data-lazy-widget><!--
   
--></div>

Многие другие дополнения доступны, тоже. Они включают в себя бесконечную прокрутку, поддержку фоновых изображений, загрузку всех изображений перед их отображением (если браузер поддерживает их) и отсрочку автоматической загрузки всех изображений.

Есть ли Серебряная пуля?

Ленивая загрузка изображений не является стандартной функцией браузера сегодня. Кроме того, для такой функциональности не существует сторонних расширений браузера.

Можно предположить, что lazyload атрибут в проекте спецификации«Приоритеты ресурсов»Microsoft и Google сделает это. Однако у него есть другая цель: установить приоритет фона для соответствующего элемента ресурса (изображение, видео, скрипт и т.д.). Таким образом, если ваша цель состоит в том, чтобы загрузить JavaScript или CSS перед изображениями, это ваш выбор. Существует еще один атрибут postpone убийцы, который предотвращает загрузку любого ресурса до тех пор, пока вы не установите свойство CSS display на значение, не none имеющее. Хорошей новостью является то, что поддержка lazyload атрибута находится в Internet Explorer 11. Плохая новость заключается в том, что postpone атрибут еще не реализован.

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

Некоторые люди пытались решить дублирование <img> тега в <noscript> тегах, сохраняя только <noscript> часть и обработку его с JavaScript. К сожалению, <noscript> не имеет контента в Internet Explorer, и он не входит в DOM вообще в фондовом браузере Android (другие браузеры могут вести себя аналогичным образом).

Альтернативой было бы использовать <script> тег, а не <noscript> , как так:

<script>function Z(){document.write('<br ');}</script>
<script>Z();</script><img src="path" attributes />

Таким образом, <img> будет атрибут <br> омичи и преобразует <br> теги в на <img data-src> document.ready мероприятии. Но этот метод требует document.write и не совместим с навигацией на основе AJAX. Мы внедрили этот метод в надстройке для Lazy Load XT, но стандартный способ использования data-attributes кажется более четким.

Наконец, Mobify имеет элегантный Захват API (см. недавний обзор на Smashing Magazine), который преобразует HTML в простой текст с помощью следующего кода, а затем обрабатывает его с JavaScript:

document.write('<plaintext style="display:none">');

К сожалению, это решение имеет свои собственные недостатки: это довольно медленно, и браузер может рассматривать его как JavaScript основе HTML parser. Кроме того, сочетание этого решения с навигацией AJAX не ясно, и это не гарантируется правильно работать во всех браузерах, потому что <plaintext> тег был стерт в HTML 2. Это на самом деле не работает в браузере Amaya W3C и на некоторых телефонах функции (например, Nokia E70). Тем не менее, это крайние случаи, и вы можете использовать Mobify.js и Lazy Load XT одновременно, хотя это выходит за рамки данной статьи.

Сравнение ленивых решений для загрузки

И Lazy Load XT и оригинальная Lazy Load не единственные решения вокруг. Ниже мы сравним большинство основных существующих решений:

ФункцияLazyLoad для j’ery Ленивый Load XT Обнародовать Ленивый (по Eisbehr)Ответственный Ленивый погрузчик bLazy Lazyload (по VVO)Эхо

Текущая версия	1.9.3	1.0.5	1.3.0	0.3.7	0.1.7	1.2.2	2.1.3	1.5.0
Зависимости	Jquery	j-Кукери, Цепто или ДОМттастик	j-Кукери или Цепто	Jquery	Jquery	—	—	—
Размер (Gzip’ed)	1.19 КБ	1.31 КБ (или 1,45 кБ с экстры)	338 B	1.45 B	1.23 КБ	1.24 КБ	1.01 КБ	481 B
Пропускает изображения выше раза	Да	Да	Да	Нет	Да	Да	Нет	Да
Эффекты загрузки	Да	Да	да (с пользовательским кодом)	Да	да (с пользовательским кодом)	да (с пользовательским кодом)	Нет	Нет
Отзывчивые изображения	Нет	да (через плагин)	Да	Нет	Да	Да	да (с пользовательским кодом)	Нет
Поддерживает прокрутки контейнеров	Да	Да	Нет	Да	Да	Нет	Да	Нет
Поддерживает горизонтальную прокрутку	Да	Да	Нет	Нет	Да	Да	Да	Да
Регулирования	Нет	Да	Нет	Да	Нет	Да	Да	Да
Ленивые фоновые изображения	Да	да (через плагин)	Нет	Да	Нет	Нет	Нет	Нет
Ленивый злит;видео	Нет	Да	Нет	Нет	Нет	Нет	Нет	Нет
Ленивые ифреймы	Нет	Да	Нет	Нет	Нет	Нет	Нет	Нет
Поддерживает Opera Mini	Нет	Да	Нет	Нет	Нет	Нет	Нет	Нет

Заключение

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

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

Скачать и внести свой вклад

Отчеты об ошибках, патчи и запросы функций приветствуются.

Источник: smashingmagazine.com

Переосмысление ленивых загрузки с ленивым нагрузки XT

Дальнейшее чтение на SmashingMag:

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

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

Как осуществляется ленивая загрузка?

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

Включают

Использовать

Видео

Размер

Требования

Совместимости

Производительности

Параметры

Поддержка AJAX

Расширение ленивой нагрузки XT

Анимация загрузки

Отзывчивые изображения

Страница Виджеты

Есть ли Серебряная пуля?

Сравнение ленивых решений для загрузки

Заключение

Скачать и внести свой вклад

Понравилось это:

Похожее

Добавить комментарийОтменить ответ

Дальнейшее чтение на SmashingMag:

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

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

Как осуществляется ленивая загрузка?

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

Включают

Использовать

Видео

Размер

Требования

Совместимости

Производительности

Параметры

Поддержка AJAX

Расширение ленивой нагрузки XT

Анимация загрузки

Отзывчивые изображения

Страница Виджеты

Есть ли Серебряная пуля?

Сравнение ленивых решений для загрузки

Заключение

Скачать и внести свой вклад

Sharing is caring

Понравилось это:

Похожее

Добавить комментарийОтменить ответ