Ленивая загрузка изображений средствами браузера
Автор материала, перевод которого мы сегодня публикуем, Эдди Османи из Google, говорит, что уже в Chrome 75 вполне может появиться поддержка нового атрибута элементов <img> и <iframe> loading. Это означает, что данные элементы будут поддерживать стандартные возможности по так называемой «ленивой загрузке» данных.
Если вам не терпится узнать о том, как использование нового атрибута выглядит в коде, то взгляните на этот пример:
Сейчас мы поговорим о том, как будет работать атрибут loading .
Предварительные сведения
Веб-страницы часто включают в себя множество изображений, что влияет на размер страниц, приводит к его чрезмерному увеличению, и влияет на скорость загрузки страниц. Многие из изображений, выводимых на страницах, находятся за пределами их видимой области. Для того чтобы увидеть подобные изображения, пользователю нужно прокрутить страницу.
Исторически сложилось так, что для того чтобы ограничить воздействие на время загрузки страниц изображений, расположенных за пределами видимой области страниц, программистам приходилось использовать JavaScript-библиотеки (вроде LazySizes). Эти библиотеки позволяют отложить загрузку подобных изображений до того момента, когда пользователь, прокручивая страницу, не подберётся к ним достаточно близко.
Страница, загружающая 211 изображений. Версия страницы, при создании которой ленивая загрузка изображений не используется, сразу загружает 10 Мб графических данных. Та же страница, использующая ленивую загрузку (с помощью LazySizes) предварительно загружает лишь 250 Кб графической информации. Всё остальное подгружается по мере продвижения пользователя по странице. Подробности об этом эксперименте можно посмотреть на webpagetest.org.
Что если бы браузер мог бы помочь программисту избежать загрузки изображений, которые находятся за пределами видимой области страниц? Это благотворно сказалось бы на скорости загрузки данных в видимой области страницы, снизило бы, на маломощных устройствах, общий объём передаваемых по сети данных, уменьшило бы потребление памяти. Скоро всё это будет возможно благодаря новому атрибуту элементов <img> и <iframe> loading .
Атрибут loading
Атрибут loading позволяет браузеру откладывать загрузку содержимого элементов <img> и <iframe> , находящихся за пределами видимой области страницы, до тех пор, пока пользователь, прокручивая страницу, не окажется достаточно близко к этим элементам. Этот атрибут поддерживает три значения:
- lazy : указывает на материалы, которые являются хорошими кандидатами на ленивую загрузку.
- eager : материалы в элементах с таким значением атрибута нужно загрузить без промедления.
- auto : браузер самостоятельно примет решение о том, применять ли к материалам с этим значением атрибута ленивую загрузку.
В настоящее время работа над атрибутом loading для элементов <img> и <iframe> ведётся в рамках стандарта HTML
Примеры
Атрибут loading работает с элементами <img> (в том числе с атрибутом srcset и внутри элемента <picture> ), а также с элементами <iframe> .
Надо отметить, что мы используем тут формулировки наподобие следующей: «когда пользователь прокрутит страницу так, что её видимая область окажется поблизости от элемента». Точный момент начала загрузки изображения браузер определяет самостоятельно. В целом мы можем надеяться на то, что браузер начнёт загрузку материалов, загрузка которых была отложена, за некоторое время до того, как область страницы, содержащая их, окажется видимой пользователю. Это увеличит шансы того, что загрузка и вывод соответствующих материалов завершатся к тому моменту, когда пользователь их увидит.
Обратите внимание на то, что я предложил, чтобы атрибут, о котором идёт речь, назвали бы именно loading , так как такой подход к его именованию соответствует тому, что использовался при выборе имени для атрибута decoding. Предыдущие предложения, наподобие lazyload , не подошли, так как нужно было, чтобы этот атрибут поддерживал бы несколько значений ( lazy , eager и auto ).
Проверка поддержки атрибута loading браузерами
Мы принимали во внимание важность возможности применения JavaScript-библиотек для организации ленивой загрузки материалов (для кросс-браузерной поддержки этой возможности). Проверить, поддерживает ли браузер атрибут loading , можно так:
Обратите внимание на то, что атрибут loading можно использовать для прогрессивного расширения возможностей страницы. Браузеры, которые поддерживают этот атрибут, смогут организовать ленивую загрузку материалов при использовании loading=lazy , а браузеры, которые эту возможность не поддерживают, будут просто, как и прежде, загружать эти материалы.
Кросс-браузерная ленивая загрузка изображения
Если важна кросс-браузерная поддержка ленивой загрузки изображений, тогда недостаточно просто определить то, поддерживает ли браузер эту возможность, и, если это не так, воспользоваться соответствующей библиотекой, если при описании изображения в разметке используется конструкция наподобие <img align=»center» src=unicorn.jpg loading=lazy /> .
В разметке нужно использовать что-то наподобие <img data-src=unicorn.jpg /> (а не src , srcset или <source> ) для того чтобы избежать срабатывания обычной загрузки изображения браузерами, которые не поддерживают новый атрибут. Для того чтобы менять подобные атрибуты на те, которые нужно использовать при поддержке браузером атрибута loading , или для загрузки соответствующей библиотеки в том случае, если этот атрибут не поддерживается, можно использовать возможности JavaScript.
Вот пример того, как это может выглядеть:
Рассмотрим некоторые особенности этого кода:
- Изображения, которые видны пользователю сразу после загрузки страницы, описаны с помощью обычных тегов <img> . Использование атрибута data-src без src приведёт к тому, что изображения, сразу после загрузки страницы, показаны не будут, поэтому, настраивая те изображения, которые должны быть видны сразу же после загрузки страницы, мы должны указывать атрибут src .
- При описании изображений, которые, сразу после загрузки страницы, пользователю не видны, мы используем атрибут data-src . Делается это для того чтобы предотвратить их обычную загрузку в браузерах, не поддерживающих атрибут loading . Если браузер этот атрибут поддерживает, мы меняем data-src на src .
- Если атрибут loading не поддерживается, мы загружаем вспомогательную библиотеку (lazySizes) и инициализируем её. Здесь мы используем class=lazyload для того чтобы указать библиотеке LazySizes на изображения, с которыми мы хотим работать, используя методику ленивой загрузки.
Демонстрационный пример
Тут можно посмотреть на пример страницы, на которой выполняется ленивая загрузка 100 изображений кошек. А вот, если интересно, видео загрузки этой страницы.
Особенности реализации поддержки атрибута loading в Chrome
Мы настоятельно рекомендуем, прежде чем пользоваться атрибутом loading в продакшне, дождаться появления его поддержки в стабильном релизе Chrome. Если же вам не терпится испытать эту возможность, тогда, возможно, вам будет интересно то, о чём мы сейчас поговорим.
Испытание атрибута loading
Для того чтобы прямо сейчас испытать новый атрибут, перейдите к странице настройки флагов Chrome ( chrome://flags ), включите флаги Enable lazy frame loading и Enable lazy image loading , и перезагрузите браузер.
Настройки браузера
Реализация методики ленивой загрузки материалов в Chrome основана не только на том, насколько близко видимая область страницы находится к этим материалам, но и на скорости соединения. Пороговые значения срабатывания ленивой загрузки материалов для разных скоростей соединения жёстко заданы в коде, но эти значения можно переопределить средствами командной строки. Вот пример переопределения настроек для изображений:
Вышеприведённая команда соответствует текущим настройкам, применяемым по умолчанию. Для того чтобы загрузка изображений начиналась бы в том случае, если позиция прокрутки страницы находится на расстоянии в 400 пикселей от изображения, все значения в этой команде нужно поменять на 400. Ниже приведён пример 1-пиксельной вариации этой команды (такая настройка используется в вышеупомянутом видео).
Весьма вероятно то, что стандартная конфигурация ленивой загрузки в Chrome изменится по мере стабилизации реализации этой возможности в ближайшие недели.
Инструменты разработчика
Особенности реализации поддержки атрибута loading в Chrome заключаются в том, что браузер, при загрузке страницы, запрашивает первые 2 Кб изображений у сервера в том случае, если он поддерживает технологию range request (запрос на диапазон). В первых 2 Кб изображений, наверняка, содержатся сведения об их размерах. Это позволяет браузеру генерировать местозаполнители, имеющие размеры, соответствующие размерам изображений. Кроме того, в эти 2Кб, если речь идёт о небольших изображениях вроде значков, весьма вероятно, входит всё изображение.
Загрузка фрагментов графических файлов
Chrome загружает оставшиеся данные изображений в тот момент, когда пользователь близок к тому, чтобы их увидеть. При работе с инструментами разработчика это может привести к тому, что в панели Network может «появиться» информация о двух загрузках изображения, а в панели Resource Timing будут выведены сведения о двух запросах, выполняемых для загрузки каждого изображения.
Определение сервером поддержки браузером атрибута loading
Если бы мы жили в совершенном мире, то для того чтобы узнать о том, нужно ли, для правильного вывода страницы в некоем браузере, использовать вспомогательную библиотеку, можно было бы не полагаться на анализ браузера средствами клиентского JavaScript. При таком подходе сервер, заранее зная, нужна такая библиотека или нет, включил бы (или не включил бы) её в состав страницы, отправляемой браузеру. Подобную проверку может сделать возможной использование технологии HTTP Client Hint, благодаря которой клиент способен передавать серверу «подсказки» о своих возможностях.
Соответствующая «подсказка», касающаяся поддержки атрибута loading , находится сейчас на ранней стадии рассмотрения.
Итоги
Автор этого материала предлагает всем, кто заинтересован в использовании атрибута loading при работе с элементами <img> и <iframe> , опробовать его, и поделиться с ним впечатлениями. Особенно ему интересно узнать о том, как, с точки зрения разработчиков, выглядят предложенные здесь механизмы кросс-браузерной поддержки ленивой загрузки данных, и о том, не упустил ли он, рассказывая о таких механизмах, какие-то пограничные случаи.
Уважаемые читатели! Планируете ли вы использовать атрибут loading в своих проектах?
Отложенная загрузка изображений
jQuery и Zepto плагин Lazy — это быстрый, многофункциональный и легкий плагин для отложенной загрузки контента. Другими словами, загрузки только того материала, который виден на экране.
В этой заметке описана отложенная загрузка изображений. Фреймы, скрипты, медиа и т.д. рассмотрены в теме: "Отложенная загрузка контента".
Для отслеживания процесса загрузки нажмите на меню справа (с монитора)
Установка:
- Подключаем библиотеку jQuery 1.7.2 + или Zepto 1.1.6 +
- Подключаем плагин jquery.lazy.js или jquery.lazy.min.js
jquery.lazy доступен для подключения через cdnjs и jsDelivr CDN:
Использование:
У картинки вместо атрибута src используем атрибут data-src и добавляем нужный класс:
Инициализируем скрипт после загрузки страницы к нужному классу:
Пример:
Обратите внимание:
Атрибут src у изображения является не обязательным, но если его нет и у картинки нет размеров, то ее высота будет равна нулю. Соответственно, если 100 таких фотографий будут следовать друг за другом, то все они одновременно окажутся в видимой области и начнут загружаться.
Чтобы этого избежать, нужно задать размеры фотографий или использовать миниатюру, как в примере.
Функции обратного вызова:
Плагин Lazy имеет четыре функции обратного вызова, которые срабатывают в разных точках загрузки элемента.
- beforeLoad — вызывается прежде чем картинка будет загружена
- afterLoad — вызывается после успешной загрузки изображения
- onError — вызывается когда картинка не может быть загружена
- onFinishedAll — вызывается когда все фотографии загружены или была возвращена ошибка
Пример:
Настройки:
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
| name | string | ‘lazy’ | Внутреннее имя, используемое для привязок. |
| chainable | boolean | true | По умолчанию Lazy является цепочкой и возвращает все элементы. Если установлено значение false, Lazy вернет созданный экземпляр плагина для дальнейшего использования. |
| autoDestroy | boolean | true | Автоматическое уничтожение экземпляра, когда никакие другие элементы не доступны для обработки.. |
| bind | string | ‘load’ | Если установлено значение load , Lazy начнет работать сразу после загрузки страницы. Если нужно использовать собственные события — event . |
| threshold | integer | 500 | Количество пикселей под видимым окном, при котором начнется загрузка изображений. |
| visibleOnly | boolean | false | Должны ли загружаться только видимые элементы. |
| appendScroll | integer | window | Элемент для прослушивания событий прокрутки. Может быть полезен, когда изображения хранятся в контейнере. |
| scrollDirection | string | ‘both’ | Определяет направление прокрутки. Вертикальная vertical , горизонтальная horizontal или обе both . |
| imageBase | string | null | Если этот параметр определен, он будет использоваться в качестве базового пути для всех изображений. |
| defaultImage | string | blank image | Base64 код картинки, который устанавливается в качестве источника изображения src и показывается до того как загрузится основная фотография. |
| placeholder | string | null | Base64 код картинки, который устанавливает фон для каждого элемента в качестве плейсхолдера загрузки. |
| delay | integer | -1 | Если нужно загрузить все элементы сразу после загрузки страницы, можно указать время задержки в миллисекундах. |
| combined | boolean | false | С помощью этого параметра Lazy будет объединять управление событиями и задержанной загрузкой элементов. |
| Эффекты | |||
| effect | string | ‘show’ | Эффект, который используется для отображения загруженных изображений show или fadeIn . |
| effectTime | integer | 0 | Время эффекта в миллисекундах. |
| Тротлинг | |||
| enableThrottle | boolean | true | Включает тротлинг. |
| throttle | integer | 250 | Время в миллисекундах для ограничения вызовов загрузки. |
Дополнения:
Дополнения для плагина jquery.lazy рассмотрены в теме: «Отложенная загрузка контента».
Плагин jquery.lazy на сайте авторов
Плагин jquery.lazy на github
Автор фотографии TimHill
- Опубликовано: 21.01.2020 / Обновлено: 22.02.2020
- Рубрики: Фото, аудио и видео
- Метки: jQuery, Zepto, Фото
- 11460 просмотров
Смотрите также:
Рентгеновские лучи на JS
Частичный показ одного изображения под другим движением курсора мыши
Качающиеся фоторамки на CSS
CSS-анимация с качающимися фоторамками
Слайдер с меняющимися фото на CSS
Слайдер с меняющимися фотографиями и их описанием на чистом CSS
Добавить комментарий:
Комментарии:
Тема интересная, применил на свой сайт. Но есть вопрос, как это все прикрутить в карусель?
Через евенты карусели
А подробнее и с примером можете подсказать?
Александр, прошу показать пример, как подключить отложенную загрузку в карусель используя евент карусели. Заранее благодарю!
Когда карусель вращается, происходит событие (евент), какой именно, нужно смотреть документацию карусели.
И когда это событие происходит, то вызываем Lazy.
У меня на masonry фильтре вешается на клик (на карусель тоже можно поставить также — на клик по стрелке)
Где carousel-lazy класс у фоток карусели.
В итоге у нас получится, что как только карсуль сдвинется, все ее фотографии будут подгружены.
Здравствуйте, скажите пожалуйста.
Вообще не пойму как правильно делают скрипт ленивой загрузки.
Вот допустим у вас на сайте в фото нет "data-src".
Но гугл не ругается что у вас нет ленивой загрузки фото. Как так?
У меня стоит lazysizes.min.js. Но макет сбивается при ленивой загрузке. Я так понимаю надо заглушку (placeholder). Сколько не читал информации не понятно как это сделать Lazy+placeholder.
По ваше скрипту, сижу, думаю, думаю. Тестил разные способы. Но так и не получилось реализовать.
Если вам не сложно. Дайте хоть пару названий или ссылочек как такое сделать.
У меня стоят data-src, только не везде.
Напишите в телеграм или ВК, попробую обьяснить как это работает все.
5 приёмов ленивой загрузки изображений
Поскольку изображения сохраняют лидерство среди самых популярных типов контента в интернете, большое количество картинок на странице очень быстро становится проблемой и, в первую очередь, это влияет на время загрузки страниц. Есть несколько способов как-то повлиять на положительное решение этой проблемы. В этой статье будут рассмотрены пять приёмов отложенной загрузки изображений, которые можете добавить в свой инструментарий веб-оптимизации, чтобы улучшить взаимодействие с пользователем на вашем веб-сайте.
Что такое Lazy Loading (ленивая загрузка)?
Ленивая загрузка изображений означает асинхронную загрузку картинок веб-страницы, то есть после полной загрузки контента или даже условно, только когда они появляются в видимой части окна браузера. Это означает, что если пользователи не будут прокручивать страницу, изображения, размещенные за пределами видимой части окна, даже не будут загружены.
Некоторые веб-сайты используют этот подход, но чаще всего это можно встретить на сайтах с большим количеством изображений. Попробуйте поискать фотографии в высоком разрешении в своем любимом онлайн-поисковике, и вы скоро поймете, как веб-сайт загружает только ограниченное количество изображений. Прокручивая страницу вниз, вы увидите, что изображения-заглушки быстро заполнятся реальными изображениями для предварительного просмотра.
Почему вы должны позаботиться о ленивой загрузке изображений?
Есть по крайней мере несколько веских причин, по которым вам стоит задуматься о ленивой загрузке изображений для вашего сайта:
- Если ваш веб-сайт использует JavaScript для отображения содержимого или предоставления пользователям какой-либо функциональности, время загрузки DOM очень скоро становится узким местом в производительности страниц. Скрипты, прежде чем начать работать, обычно ждут полной загрузки DOM. На сайте со значительным количеством изображений, отложенная загрузка, или загрузка изображений асинхронно, может иметь решающее значение для пользователей, которые начинают размышлять: оставаться и подождать или уже покинуть ваш сайт.
- Поскольку большинство решений загружают изображения только в том случае, когда пользователь прокрутил до места, где они станут видны внутри области просмотра, то эти изображения никогда не будут загружены, если пользователи никогда не достигнут этой точки. Это означает значительную экономию трафика, за что большинство пользователей, особенно с доступом к Интернету на мобильных устройствах и медленных соединениях, будут вам благодарны.
Если ленивая загрузка изображений помогает повысить производительность сайта, то как лучше это сделать?
Вряд ли существует идеальный вариант.
Если вы живете и дышите JavaScript, реализация собственного lazy load решения не должна быть проблемой. Ничто не даёт вам больше контроля, чем кодирование чего-либо самостоятельно. Кроме того, вы можете просматривать веб-страницы для поиска подходящих подходов и поэкспериментировать с ними.
№1 Нативный lazy load
Нативная ленивая загрузка для img и iframe очень крутая. Ничто не может быть более простым, чем такая разметка:
Как видите, нет JavaScript, нет динамической подмены значения атрибута src , просто «старый, тёплый, ламповый» HTML.
Атрибут loading даёт возможность задерживать скрытые за пределами окна изображения и фреймы, пока пользователь не прокрутит страницу до них. loading может принимать любое из этих трёх значений:
- lazy : отличный вариант для ленивой загрузки
- eager : указывает браузеру не ждать и загружать контент сразу
- auto : оставляет опцию включения отложенной загрузки на усмотрение браузера
У этого метода нет конкурентов: у него нет ничего лишнего, он чистый и простой. Однако, хотя на момент написания статьи большинство основных браузеров уже хорошо поддерживают атрибут loading , большинство — это ещё не все.
№2 Ленивая загрузка с использованием API Intersection Observer
Intersection Observer API — это современный интерфейс, который вы можете использовать для отложенной загрузки изображений и другого контента. Вот как MDN представляет этот API:
Intersection Observer API позволяет веб-приложениям асинхронно следить за изменением пересечения элемента с его родителем или областью видимости документа viewport.
Тут всё понятно: асинхронно отслеживается пересечение одного элемента с другим. Допустим, вы хотите лениво загрузить галерею изображений. Разметка для каждого изображения будет выглядеть так:
Обратите внимание, что путь к изображению содержится внутри атрибута data-src , а не src . Причина в том, что при использовании src изображение будет загружаться немедленно.
В CSS вы указываете каждому изображению значение минимальной высоты, скажем, 100px . Это резервирует место каждому изображению (элемент img без атрибута src ):
В JavaScript вы добавляете объект с конфигурацией и регистрируете его в экземпляре intersectionObserver :
Затем, надо перебрать все изображения и добавить их в этот экземпляр iterationObserver:
Преимущества этого решения: его легко внедрить, оно эффективно и перекладывает выполнение тяжелых вычислений на API intersectionObserver.
С другой стороны, хотя API-интерфейс Intersection Observer поддерживается большинством последних версий браузеров, но не всеми. Однако, для маргинальных браузеров доступен полифилл.
Вы можете узнать больше об API Intersection Observer и подробностях реализации в этой статье.
№3 Lozad.js
Быстрая и простая альтернатива реализации для ленивой загрузки изображений — позволить выполнить большую часть работы готовой JS-библиотеке.
Lozad.js — это высокопроизводительный, легкий и настраиваемый ленивый загрузчик на чистом JavaScript и без каких-либо зависимостей. Его можно использовать для отложенной загрузки изображений, видео, iframe и т.д. И он использует API Intersection Observer.
Lozad.js можно подключить с помощью npm/yarn:
и импортировать его:
Кроме того, вы можете просто загрузить библиотеку с помощью CDN и добавить ее в конец HTML-страницы в теге <script> :
Далее, для базовой реализации, добавьте css-класс lozad html-элементам в разметке:
Наконец, в JS создайте экземпляр Lozad:
Если нет желания углубляться в работу API-интерфейса Intersection Observer или просто ищете быструю реализацию, применимую к различным типам контента, Lozad — отличный выбор.
Только следует помнить о поддержке маргинальных браузеров, для API Intersection Observer всё еще требуется polyfill.
№4 Отложенная загрузка с эффектом размытия
Если читаете Medium.com, то наверняка заметили, как сайт загружает основное изображение внутри поста. Первое, что увидите, это размытая копия изображения с низким разрешением, тогда как его версия с высоким разрешением лениво загружается:
Размытое изображение-заглушка на сайте Medium.com
Лениво загруженное изображение высокого разрешения на веб-сайте Medium.com
Лениво загружать изображения с этим интересным эффектом размытия можно несколькими способами. Вот один из них: