Ленивая загрузка изображений. Управление загрузкой изображений. Основные характеристики плагина

• Перевод

В наши дни главным камнем преткновения на пути к высокой скорости загрузки сайтов являются изображения. Это особенно характерно для проектов из сферы электронной коммерции. На них изображения, обычно довольно «тяжёлые», составляют основную часть содержимого страниц. Это, как правило, приводит к тому, что для того, чтобы показать пользователю страницу, его браузеру требуется загрузить несколько мегабайт графических данных. Как ускорить загрузку страниц в такой ситуации? Ответу на этот вопрос и посвящён материал, перевод которого мы сегодня публикуем.

Вот сведения о том, сколько изображений загружается для формирования этой страницы:

Как видите, тут 137 изображений! Это означает, что более 80% данных, необходимых для вывода страницы и передаваемых по сети, представлены в виде графических файлов.

Проанализируем теперь сетевые запросы, выполняемые при загрузке страницы:

В данном случае файлы, полученные в результате разделения кода проекта, загружаются позже, чем могли бы. Происходит это из-за того, что сначала нужно загрузить главный бандл cp_ny.bundle . Этот бандл можно было бы загрузить куда быстрее, если бы ему не мешали 18 изображений, соревнующихся друг с другом за полосу пропускания.

Как это исправить? На самом деле, по-настоящему «исправить» это не получится, но можно сделать много всего для того, чтобы оптимизировать загрузку изображений. Существует немало подходов к оптимизации изображений, используемых на веб-страницах. Среди них - использование различных форматов графических файлов, сжатие данных, применение техники blur animation, использование CDN. Мне хотелось бы остановиться на так называемой «ленивой загрузке» изображений (lazy loading). В частности, речь пойдёт о том, как реализовать эту технику на React-сайтах, но, так как основана она на механизмах JavaScript, её можно интегрировать в любой веб-проект.

Class Image extends PureComponent { render() { const { src } = this.props; return ; } }
Он принимает, в качестве свойства, URL, и использует его для рендеринга HTML-элемента img . Вот соответствующий код на JSFiddle. На следующем изображении показана страница, содержащая этот компонент. Обратите внимание на то, что для того, чтобы увидеть выводимое им изображение, нужно прокрутить содержимое страницы.

Для того чтобы реализовать в этом компоненте методику ленивой загрузки изображений нужно выполнить следующие три шага:

Render() { return ; }

ComponentDidMount() { this.observer = new IntersectionObserver(() => { // тут будет код для реализации третьего шага }, { root: document.querySelector(".container") }); this.observer.observe(this.element); } .... render() { return this.element = el} />; }
Разберём этот код. Вот что здесь сделано:

• К элементу img добавлен атрибут ref . Это позволяет позже обновить ссылку на изображение в src без необходимости проводить повторный рендеринг компонента.
• Создан новый экземпляр IntersectionObserver (об этом мы поговорим ниже).
• Объекту IntersectionObserver предложено наблюдать за изображением с использованием конструкции observe(this.element) .

На первый взгляд такая характеристика API может показаться не особенно понятной, но, на самом деле, устроено оно очень просто. Экземпляру IntersectionObserver передаётся несколько параметров. В частности, мы использовали параметр root , который позволяет задать корневой DOM-элемент, рассматриваемый нами в качестве контейнера, о пересечении элемента с границей которого нам нужно узнать. По умолчанию это область, в которой находится видимый фрагмент страницы (viewport), но я явным образом установил его на использование контейнера, находящегося в элементе iframe JSFiddle. Сделано это для того, чтобы, позже, рассмотреть одну возможность, которая не рассчитана на использование элементов iframe .

Причина, по которой использование IntersectionObserver для определения момента того, когда элемент становится видимым, популярнее более традиционных методов, вроде совместного применения onScroll и getBoundingClientRect() заключается в том, что механизмы IntersectionObserver выполняются за пределами главного потока. Однако, коллбэк, вызываемый после того, как IntersectionObserver обнаружит пересечение элемента с контейнером, выполняется, естественно, в главном потоке, поэтому его код не должен быть слишком тяжёлым.

This.observer = new IntersectionObserver(entries => { entries.forEach(entry => { const { isIntersecting } = entry; if (isIntersecting) { this.element.src = this.props.src; this.observer = this.observer.disconnect(); } }); }, { root: document.querySelector(".container") }); ....
В коллбэк, при обнаружении пересечения, передаётся массив элементов entries , который напоминает набор снимков состояния всех целевых элементов, для которых обнаружено пересечение заданной границы. Свойство isIntersecting указывает на направление пересечения. Если элемент, за которым организовано наблюдение, попадает извне в корневой элемент, оно равно true . Если элемент покидает корневой элемент, то оно равно false .

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

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

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

С этой проблемой, правда, справиться не так уж и сложно. Сделать это можно благодаря тому, что API Intersection Observer предоставляет разработчику возможность расширять или сужать границы корневого элемента (в нашем случае это элемент.container). Для того чтобы этой возможностью воспользоваться, достаточно добавить одну строчку кода туда, где осуществляется настройка корневого контейнера:

RootMargin: "0px 0px 200px 0px"
В свойство rootMargin надо записать строку, структура которой соответствует правилам CSS, используемым для настройки параметров отступов элементов. В нашем случае мы сообщаем системе о том, что нижнюю границу, используемую для обнаружения пересечения элемента с контейнером, нужно увеличить на 200 пикселей. Это означает, что соответствующий коллбэк будет вызван, тогда, когда элемент попадёт в область, которая на 200 пикселей ниже нижней границы корневого элемента (по умолчанию здесь используется значение 0).

Вот код, в котором реализована эта методика.

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

Изображения на страницу загружаются двумя основными способами: посредством тега HTML и с помощью CSS свойства background-image . Поэтому мы сначала посмотрим на пример с тегом, а потом перейдем к рассмотрению фоновых изображений CSS .

Начнем с простой HTML разметки для вставки изображений на страницу.

Разметка для лениво загружаемых изображений практически такая же.

Второй шаг заключается в том, чтобы избежать преждевременной загрузки изображения. Браузер использует атрибут src тега img для запуска загрузки изображения. И не имеет значения, является ли это изображение первым или тысячным по счету. Если браузер находит атрибут src в разметке, он немедленно запускает загрузку изображения, даже, если оно находится за пределами области видимости.

Для того чтобы отложить загрузку изображения, нужно поместить URL адрес изображения в атрибуте отличном от атрибута src, допустим в data-src. И так, как атрибут src пустой, то и браузер не будет загружать данное изображения.

Теперь, так как мы предотвратили загрузку изображения стразу, нам необходим, какой-то способ сообщить браузеру, когда данное изображение надо загрузить. Иначе, это никогда не случится. Для этого, мы проверяем находиться ли изображение (в нашем случае, его заменитель – серый прямоугольник) в видимой области, и затем загружаем его.

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

Первый метод. Запуск загрузки изображения, используя события JavaScript

В этом методе используются обработчики для следующих событий: scroll, resize и orientationChange. Событие прокрутки (scroll ) определяет текущее положение пользователя на странице, когда он перематывает ее. События resize и orientationChange важны в одинаковой степени. Событие resize возникает, когда изменяется размер окна браузера, а событие orientationChange вызывается, когда ориентация устройства меняется с ландшафтного на портретный режим и обратно.

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

Когда какое-либо из этих событий появляется, мы находим все изображения на странице, которые еще не загружены. Из этих изображений мы выбираем именно те, которые находятся в видимой области браузера. Выбор делается на основе расчетов верхнего смещения изображения, текущего верхнего положения документа и высоты окна. Поэтому, если изображение появилось в окне просмотра, мы выберем его URL-адрес из атрибута data-src и переместим его в атрибут src , после этого браузер загрузит изображение.

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

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

Вот рабочий пример этого подхода:

Таким образом, в данной статье мы обсудили первый метод ленивой загрузки изображения, а в следующей статье мы обсудим другой метод.

В то время как многие люди уже пожинает плоды понятий ленивой загрузки, некоторые из них до сих пор задаются вопросом о lazy загрузки. Если у вас небольшие представления об отложенной загрузки и что она может сделать, то эта статья для вас. Мы рассмотрели все, что вам нужно знать о отложенной загрузки. Итак, читайте статью и начинайте работу!

Прежде, чем мы начнем с преимуществ lazy загрузки, дайте узнаем, что такое ленивая загрузка и как она работает.

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

Поисковая система Google не могут просматривать объекты, которые лениво загрузится. Не уверенны? Вот пример. Если у вас есть какая-либо часть вашего сайта с изображением продукта в нижней части главной страницы и вы активировали отложенную загрузку, то специфическая секция не загружается, пока вы не выделите этот раздел. Следовательно, приводит к не показу исходного кода страницы. Таким образом, он не будет отображаться на кэше Google .

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

Это миф! Оптимизация сайта имеет мало общего с отложенной загрузкой. Сценарий Ajax все равно будет выполняться. Единственное отличие состоит в том, что он будет выполняется в фоновом режиме. Сайт будет загружаться быстрее! Нет сомнения в этом! На оптимизацию сайта не влияет.

Отложенная загрузка представляет собой механизм, который может привести вас к чему-то, что каждый жаждет – веб-сайт молниеносно. Давайте признаем: мы все нетерпеливы в ожидании содержимого для загрузки. После того, как произошла задержка, даже на несколько секунд, заставит нас выйти из веб-страницы. С отложенной загрузкой, мы не должны ждать загрузки всего содержимого.

Как загрузить меньше ресурсов, которые вам требуется, нет места для ненужной загрузки всего содержимого на веб-странице. Это делает вашу загрузку страницы намного быстрее.

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

При отложенной загрузки на WordPress , вы также можете иметь более быстрый доступ ко всему содержимому. , хотя остается тем же самым, скорость загрузки содержимого увеличивается.

Ненужные загрузки контента можно избежать и много ваших данных тоже могут быть сохранены. Содержание, которым вы обеспокоены, можно наблюдать с помощью прокрутки до конца страницы.

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

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

Этот ленивый плагин загрузки позволяет пользователям выбрать в постах изображения и эскизы, Gravatar, фреймы и заменяет содержимое с заполнителем. При выборе конкретного заполнителя вы можете пропустить изображения с разными классами. BJ Lazy Load также обслуживает различные размеры оптимизированных изображений и автоматически служит HiDPI изображениям для различных экранов HiDPI, как у сетчатке отображения Apple.

Добавляет Jquery отложенной загрузки различных изображений. Лучшая часть об этом плагине является то, что она очень проста в использовании. Все, что вам нужно сделать, это просто установить его и активировать. Изображения на сайте, которые вы посещаете будет автоматически загружаться, как вы прокрутите вниз до нижней части страницы. Вам не нужно ждать, чтобы изображения загружались в течение длительного времени. Как и при открытии веб-страницы и прокрутите до конца страницы, изображения уже загружены!

Всем привет. Сегодня хочу поговорить с вами о том, как организовать «ленивую загрузку» контента на посадочных страницах.

Часто, ее еще называют «бесконечной прокруткой». Наверняка вы видели подобный эффект, когда контент изначально не присутствует на сайте, а по мере прокрутки страницы он плавно подгружается.

Давненько уже написали в раздел «Ваши предложения», с просьбой написать статью о том, как реализовать такой эффект:

Вот и решил, заняться реализацией. Спасибо, что подкидываете идеи. Приступим…

Как и в большинстве случаев, начинаем с того, что подключаем библиотеку jQuery:

А сейчас нужно немножко отвлечься и я объясню вам суть метода. Все это затевается для того, чтобы не грузить все элементы сайта (ваше портфолио или отзывы), а подгружать их по мере необходимости. Например, при клике пользователя по кнопке «Показать еще». Таким образом, страница будет грузиться намного быстрее. А теперь суть, при помощи ajax технологии мы будем подгружать нужный элемент (div) и стороннего файла на наш лендинг. Вот так все просто, как в теории, так и на практике, и вы в этом скоро убедитесь.

Теперь давайте создадим основной блок, например, с картинками наших работ. Предположим мы рисуем иконки, и будем подгружать их при клике по кнопке. Я создал такую структуру:

Портфолио Показать еще...

Как видите, все — просто. Но на что нужно обратить внимание? А обратить внимание нужно на div с id=»smartPortfolio», id=»moreButton» и id=»loadingDiv», так как они используются в скрипте, который и помогает нам загружать контент с других страниц. SmartPortfolio — это «контейнер» для нашего портфолио. MoreButton — это будет наша кнопка, при клике на которую загружается еще одна часть портфолио. LoadingDiv — область, в которую будет выводиться текст, когда портфолио будет полностью открыто, либо возникнет какая-нибудь ошибка.

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

Сам скрипт я не писал, а нашел на одном из сайтов, автор указан в исходнике, кому интересно — посмотрите. Так как он не слишком большого размера, то приведу его весь, но если вы планируете использовать такие же названия айдишников и пути к файлам, как у меня, то можете даже не заглядывать в него, а просто подключить перед закрывающимся тегом body (в футере).

Для тех, кто планирует вносить правки вот сам скрипт:

Var lazyload = lazyload || {}; (function($, lazyload) { "use strict"; var page = 2, buttonId = "#moreButton", loadingId = "#loadingDiv", container = "#smartPortfolio"; lazyload.load = function() { var url = "./pages/" + page + ".html"; $(buttonId).hide(); $(loadingId).show(); $.ajax({ url: url, success: function(response) { if (!response || response.trim() == "NONE") { $(buttonId).fadeOut(); $(loadingId).text("Портфолио полностью загружено"); return; } appendContests(response); }, error: function(response) { $(loadingId).text("К сожалению, возникла какая-то ошибка при запросе. Пожалуйста, обновите страницу."); } }); }; var appendContests = function(response) { var id = $(buttonId); $(buttonId).show(); $(loadingId).hide(); $(response).appendTo($(container)); page += 1; }; })(jQuery, lazyload);

Итак, теперь стоит поговорить о тех файлах, из которых мы будем подгружать информацию. Скрипт предполагает, что это будут файла с именами 2.html…5.html и т.д. В которых лежит наша информация. Например, у меня первым подгружается файл 2.html и он имеет такое содержимое:

В моей структуре сайта, страницы из которых будет браться информация для последующей загрузке при клике, лежит в папке pages. Там три файла, два из которых заполнены, а последний — пустой. Это предполагает логика скрипта.

Путь в скрипте указан следующим образом:

Var url = "./pages/" + page + ".html";

Если вы планируете использовать другой путь, не забудьте заменить его в скрипте. Кроме того, если вы использовали другие айдишники, то и их придется переопределить в скрипте. Вот тут:

ButtonId = "#moreButton", loadingId = "#loadingDiv", container = "#smartPortfolio";

И, как я уже говорил, перед закрывающимся тегом body подключаем сам скрипт:

Вот так на landing page можно реализовать «ленивую загрузку». Присылайте еще темы, на которые вы хотели-бы почитать статью на блоге. По мере возможности буду стараться публиковать не запланированный материал, а тот, о котором спрашиваете вы в разделе «Ваши предложения». А на сегодня — все. Пока!

• Перевод
• Tutorial

Быстрая и плавная загрузка изображений - это одна из немаловажных составляющих хорошего веб-интерфейса. Кроме того, появляется все больше сайтов, использующие крупные фотографии в дизайне, таким проектам особенно важно следить за корректной загрузкой графики. В этой статье описано несколько техник, которые помогут контролировать загрузку изображений.

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

Например, чтобы задать соотношение сторон 4:3, можно использовать следующий CSS:

Img_wrapper{ position: relative; padding-top: 75%; overflow: hidden; } .img_wrapper img{ position: absolute; top: 0; width: 100%; opacity: 0; }
Для того, чтобы изображение отображалось в браузере только после полной подгрузки, необходимо добавить событие onload для изображения и использовать JavaScript, который будет обрабатывать событие:

function imgLoaded(img){ var $img = $(img); $img.parent().addClass("loaded"); };
Код функции внутри тега HEAD должен быть расположен в самом конце, после любого jQuery или другого плагина. После полной подгрузки изображения его необходимо показать на странице:

Img_wrapper.loaded img{ opacity: 1; }
Для эффекта плавного появления картинки можно использовать CSS3 transition:

Img_wrapper img{ position: absolute; top: 0; width: 100%; opacity: 0; -webkit-transition: opacity 150ms; -moz-transition: opacity 150ms; -ms-transition: opacity 150ms; transition: opacity 150ms; }
Живой пример этого способа можно .

Используем функцию slideLoaded(), чтобы контролировать процесс:

Function slideLoaded(img){ var $img = $(img), $slideWrapper = $img.parent(), total = $slideWrapper.find("img").length, percentLoaded = null; $img.addClass("loaded"); var loaded = $slideWrapper.find(".loaded").length; if(loaded == total){ percentLoaded = 100; // INSTANTIATE PLUGIN $slideWrapper.easyFader(); } else { // TRACK PROGRESS percentLoaded = loaded/total * 100; }; };
Подгруженным изображениям присваивается класс loaded, а также отображается общий прогресс. И снова, JavaScript должен быть помещен в конец тега HEAD, после всего остального.

var heroArray = [ "/uploads/hero_about.jpg", "/uploads/hero_history.jpg", "/uploads/hero_contact.jpg", "/uploads/hero_services.jpg" ]
Когда посетитель заходит на сайт, после загрузки главной страницы, начинают загружаться изображения в кэш. Для того, чтобы кэширование не мешало отображению текущего контента, необходимо функционал JavaScript добавить в событие window load:

Function preCacheHeros(){ $.each(heroArray, function(){ var img = new Image(); img.src = this; }); }; $(window).load(function(){ preCacheHeros(); });
Такой способ улучшает удобство использования сайта, однако дает дополнительную нагрузку на сервер. Это нужно иметь в виду при внедрении подобного функционала. Кроме того, необходимо обязательно учитывать возможные пути посетителей на сайте и кэшировать изображения, расположенные на страницах, которые пользователь вероятнее всего посетит. Чтобы понять такие пути по сайту, необходимо анализировать статистику посещаемости.

Стоит заметить, что URL изображение задано в data-src, а не в src. Это необходимо, чтобы браузер не загружал картинку сразу. Вместо этого в src загружается прозрачный пиксель в GIF, заданный в base64, что уменьшает количество обращений к серверу.

Остается только при нужном событии изменить значение src на data-src. JavaScript позволяет загружать изображения постепенно:

Function lazyLoad(){ var $images = $(".lazy_load"); $images.each(function(){ var $img = $(this), src = $img.attr("data-src"); $img .on("load",imgLoaded($img)) .attr("src",src); }); }; $(window).load(function(){ lazyLoad(); };