Максимально содержательно про lazy loading! пора внедрять отложенную загрузку для изображений и iframe

How our lazy loading works

We use a small (2.5 KB), open-source JavaScript library for lazy loading images, iframes, etc. We also support lazy-loading WebP files. You will see a request to the following file on your site:

Perfmatters lazy loading vs native lazy loading

WordPress 5.5 now has native lazy loading by default. However, we recommend using the lazy loading solution in Perfmatters. Why? Our solution is faster and better than native lazy loading for the following reasons:

  • Native means it’s letting the browser decide what should be lazy loaded. Unfortunately with that is the problem that by default, it’s way too eager. This can be an advantage as you probably won’t need any exclusions, but in general, not as many resources will be lazy loaded. This means it won’t be as fast.
  • Native lazy loading is making improvements but still lacks support for certain things. We’ve been adding a lot of features to ours, as you can see below.

Important: When lazy loading in Perfmatters is enabled, the default native lazy loading in WordPress is automatically disabled.

Version History

  • 1.1.0 (11.01.2016): jQLight script, remove lazy-hidden class
    for non-img elements, fix lazy loading if there is one image only, fix issues in bg, srcset, and video addons,
    new addons for Bootstrap and jQueryMobile events

  • 1.0.6 (19.11.2014): fix work of srcset addons in IE6-8

  • 1.0.5 (05.06.2014): fix picture and script addons

  • 1.0.4 (30.05.2014): fix calls to each() method

  • 1.0.3 (28.05.2014): support DOMstatic library (, , , , , and modules are required); fix loading of images on browser’s tab activation

  • 1.0.2 (05.03.2014): fix work in jQuery Mobile 1.4

  • 1.0.1 (16.02.2014): fix triggering and
    events in and addons

  • 1.0.0 (16.01.2014): new option,
    option is removed in flavour of , event is renamed to ,
    new option, fix work with Zepto, fix work in some old mobile browsers, default value for
    option is set to , lazy* events are triggered after corresponding on* handlers, new event,
    remove «simple» version from build.

  • 0.8.12 (12.01.2014): significant performance improvement,
    fix work in BlackBerry 5, fix options

  • 0.8.11 (10.01.2014): fix to work in browsers without
    event (e.g. Opera Mini), handle event for better response on mobile devices.

  • 0.8.10 (07.01.2014): bugfix «video» addon, remove loading of
    in demo.

  • 0.8.9 (06.01.2014): option, fix srcset
    addon, speed up work with jQuery

  • 0.8.8 (26.12.2013): Fix sharing $el.lazyLoadXT object,
    support $(window).lazyLoadXT({…}) call with overrides parameter

  • 0.8.7 (26.12.2013): New «picture» addon, feature to pass
    original jQuery element object (with property) to and callbacks/event handlers,
    support empty value for attribute in addon, minor fixes/improvements, horizontal scroll
    demo, infinite scroll demo

  • 0.8.6 (18.12.2013): New «widget» addon, support of per
    element options

  • 0.8.5 (15.12.2013): New addons, «simple» version,
    event, slight reduce minified size

  • 0.8.4 (12.12.2013): Fixed check of removed elements,
    support of parameter, additional examples in (srcset polyfill, transparent
    placeholder for IE6/7)

  • 0.8.3 (10.12.2013): Speed up initialization,
    new option, additional examples of extendability in directory

  • 0.8.2 (08.12.2013): Built-in support of videos in

  • 0.8.1 (06.12.2013): Add support of , ,
    , and events

  • 0.8.0 (05.12.2013): Initial release

🔎 Search Engine Optimization (SEO)

are using the following strategy by default:

Server side rendering (SSR)

If the incoming request is from a bot; it will set to on the image (letting the browser loading the image right away). Useful if the bot don’t understand javascript.

If the request is not from a bot (or if we can’t decide), don’t do anything and let the client fix the images (see below).

You can chang this behavior by implementing your own function (see above). Let’s say you always want to show the image ASAP for SSR, regardles of if the user is a bot or not:

import { isPlatformServer } from '@angular/common';
import { IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';

class LazyLoadImageHooks extends IntersectionObserverHooks {
  skipLazyLoading(attributes: Attributes) {
    // Skipping lazyloading the image for SSR
    return isPlatformServer(this.platformId); 
  }
}

Client side

  • If the user is a bot (see hook above), render all the images right away. (useful if the bot understand javascript)
  • If the user is not a bot (or if we can’t decide), lazy load the images

Lazy Loader – лучший плагин для реализации Lazy Load изображениям в CMS WordPress

Страница плагина на GitHub

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

Ленивые загрузки (без необходимости каких-либо модификаций вручную):

  • Изображения, вставленные через img или picture в сообщениях, страницах, пользовательских типах сообщений, текстовых виджетах,…
  • Lazy Load для миниатюр.
  • Поддерживает фреймы. *
  • Видео элементы. *
  • Аудио элементы. *

Плагин имеет свои настройки в разделе «Настройки» -> « Медиа » -> « Параметры Lazy Loader » в которых Вы можете настроить:

  • Классы присвоенные изображениям которые не нужно загружать отложено.
  • Включить отложенную загрузку для iFrames.
  • Включите плагин lazysizes unveilhooks, который добавляет поддержку для большего количества элементов, например, видео и аудио элементов для Lazy Load. *
  • Включить отложенную загрузку для аудио элементов.
  • Включите плагин lazysizes aspectratio . Этот плагин рассчитывает необходимое пространство для изображений до их загрузки. Это позволяет избежать скачков содержимого при загрузке изображений и обеспечивает ленивую загрузку для изображений который находятся в сетке постов.
  • Показать загрузочный счетчик.
  • Расширение unveilhooks lazysizes поддерживает больше, чем видео и аудио элементы, но вам нужно вручную изменить разметку, чтобы использовать его для:
  • Фоновые изображения.
  • Сценарии.
  • Стили.

Плагин добавляет noscript элемент как запасной вариант для браузеров у которых отключен JavaScript.

Автоматическая модификация разметки изображения не работает для изображений, добавленных с использованием wp_get_attachment_image(), поскольку не может быть обработана noscript.

Вы можете отключить отложенную загрузку для элементов с определенными классами CSS, определив их с помощью настроек плагина ( Настройки › Медиа › Параметры Lazy Loader ). Или используйте атрибут data-no-lazyload.

Установка

Upload Lazy Load for Videos into you plugin directory (/wp-content/plugins/) and activate the plugin through the ‘Plugins’ menu in WordPress.

When you had already published videos before you have activated Lazy Load for Videos, update all posts by clicking the «Update Posts» button below the «Save Changes» button.

You may have to clean the website’s and browser’s cache.

If you don’t see a preview image instead of the Youtube/Vimeo video, open the post editor and update/save the post again or even update all posts using the above mentioned «Update Posts» button.

Optionally: Sign up to the Lazy Load for Videos newsletter to get notified about major updates.

Improved data-savings and distance-from-viewport thresholds #

As of July 2020, Chrome has made significant improvements to align the image lazy-loading distance-from-viewport thresholds to better meet developer expectations.

On fast connections (e.g 4G), we reduced Chrome’s distance-from-viewport thresholds from to and on slower connections (e.g 3G), changed the threshold from to . This change achieves two things:

  • behaves closer to the experience offered by JavaScript lazy-loading libraries.
  • The new distance-from-viewport thresholds still allow us to guarantee images have probably loaded by the time a user has scrolled to them.

You can find a comparison between the old vs. new distance-from-viewport thresholds for one of our demos on a fast connection (4G) below:

Old thresholds. vs new thresholds:

and the new thresholds vs. LazySizes (a popular JS lazy-loading library):

To ensure Chrome users on recent versions also benefit from the new thresholds, we have backported these changes so that Chrome 79 — 85 inclusive also uses them. Please keep this in mind if attempting to compare data-savings from older versions of Chrome to newer ones.

We are committed to working with the web standards community to explore better alignment in how distance-from-viewport thresholds are approached across different browsers.

Images should include dimension attributes

While the browser loads an image, it does not immediately know the image’s dimensions, unless these are explicitly specified. To enable the browser to reserve sufficient space on a page for images, it is recommended that all tags include both and attributes. Without dimensions specified, layout shifts can occur, which are more noticeable on pages that take some time to load.

Alternatively, specify their values directly in an inline style:

The best practice of setting dimensions applies to tags regardless of whether or not they are being loaded lazily. With lazy-loading, this can become more relevant. Setting and on images in modern browsers also allows browsers to infer their intrinsic size.

Images will still lazy-load if dimensions are not included, but specifying them decreases the chance of layout shift. If you are unable to include dimensions for your images, lazy-loading them can be a trade-off between saving network resources and potentially being more at risk of layout shift.

While lazy-loading in Chromium is implemented in a way such that images are likely to be loaded once they are visible, there is still a small chance that they might not be loaded yet. In this case, missing and attributes on such images increase their impact on Cumulative Layout Shift.

Take a look at this demo to see how the attribute works with 100 pictures.

Images that are defined using the element can also be lazy-loaded:

Although a browser will decide which image to load from any of the elements, the
attribute only needs to be included to the fallback element.

Что такое отложенная загрузка изображений

Скрытые изображения — это картинки, которые находятся за пределами видимости веб-страницы (viewport), не прибегая к прокрутке. То есть те картинки, которые нам еще предстоит посмотреть, когда мы будем прокручивать страницу вниз или вверх. Отложенную загрузку еще называют ленивой загрузкой изображений (lazy load images).

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

Все эти действия сводятся к оптимизации сайта, то есть на ускорение загрузки отдельных страниц сайта. Этот фактор учитывается при тестировании сайта в сервисе pageSpeed Insights от гугла.

Давайте теперь разберем как этого можно добиться. Работать загрузка изображений будет следующим образом — при прокрутке страницы все картинки будут загружаться плавно по мере видимости. Посмотреть это можно на демке.

Еще немного о плейсхолдерах

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

В примере выше в качестве заглушки мы использовали прозрачную gif-картинку, закодированную в base64. Вообще, если не использовать прелодер, то во время загрузки мы вообще ничего не увидим. Есть варианты разнообразить этот момент.

Плейсхолдер доминирующего цвета

Данная техника состоит в том, чтобы взять в оригинале картинки доминирующий (базовый) цвет и показывать его до загрузки. Такой подход используют сайты Pinterest и Google картинки. Вот как это выглядит.


Источник изображения — https://manu.ninja/dominant-colors-for-lazy-loading-images

Извлечь доминирующий цвет можно, как с помощью JavaScript, так и с помощью PHP, используя расширение . Наиболее подробнее об этом можете почитать здесь. Я не буду тут останавливаться подробно, так как это тема для отдельного разговора. Может быть как нибудь в отдельной статье…

Плейсхолдер низкого качества (LQIP)

Также, до загрузки изображения мы в качестве заглушки можем показывать мутное оригинальное изображение. Такой трюк использует Facebook для изображений. Это дает некое представление о том, какая будет загружаемая картинка, да и выглядит довольно не плохо. Рабочий пример можете посмотреть на CodePen.


Плейсхолдер низкого качества (LQIP)

Вот HTML-код изображения.

Принцип работы скриптов lazy-load

Lazy-load или «ленивая» загрузка — это способ отображения контента на сайте, когда элементы, появление которых определяет внешний ресурс, загружаются не сразу вместе с запрашиваемой страницей, а асинхронно — по мере необходимости. К подобным элементам относятся, например, изображения () и фреймы (). Их объединяет наличие атрибута , указывающего на источник ресурса.

Когда браузер «видит» у элемента атрибут , то осуществляет сетевой запрос по указанному адресу, что увеличивает время полной загрузки документа. Соответственно, чем больше внешних ресурсов синхронно подключается к странице, тем медленнее она загружается. Чтобы избежать множества одновременных запросов и оптимизировать скорость загрузки, используется техника lazy-load.

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

Основы работы большинства скриптов «ленивой» загрузки описываются подобным алгоритмом:

  1. Элементы, которые необходимо загружать асинхронно, встраиваются на страницу с другим, временным значением атрибута (или вовсе без него, что неправильно с точки зрения валидации кода). Как правило, временное значение содержит адрес шаблона, который по весу на порядок легче оригинального исходника.
  2. При необходимости в атрибут вставляется оригинальный, исходный адрес ресурса. Как правило, эта замена может осуществляться двумя путями:
    1. По требованию пользователя, когда для элемента наступают события или .
    2. Автоматически при попадании элемента в пользовательский viewport путём проверки события , а также и для мобильных устройств.

Таким образом, при использовании lazy-load при первой загрузке страницы производится не одновременно несколько запросов к разным внешним ресурсам, а всего один — к временному шаблону, указанному в атрибуте , который кэшируется браузером, и только затем при необходимых условиях (наступление заданных событий) для выбранных элементов устанавливается их оригинальный .

Существует и иной подход, при котором можно обойтись без замещающих шаблонов для оригинальных ресурсов: элементы не встраиваются на страницу изначально, а создаются динамически в процессе просмотра или определенных действий пользователя (подобные манипуляции с DOM используются, например, при подключении скриптов статистики Google Analytics или Яндекс. Метрики) либо клонируются из Shadow DOM (по такому принципу работает элемент ).

🔄 API

lazyLoad

Type:

Example:

The image to be lazy loaded. This image will replace the default image ().

<img ="'https://www.placecage.com/1000/1000'" ="'https://hd.unsplash.com/photo-1431400445088-1750c997c6b5'" />
defaultImage (optional)

Type:

Example:

Path to default image. This image will be loaded right away.

You can also use attribute for img tag to define default image:

or property for non-image tags:

errorImage (optional)

Type:

Example:

An image to be loaded if failing to load . Will load the default image () if absent.

<img ="someDefaultImage" ="imageToLazyLoad" ="imageToShowOnError" />
offset (optional)

Type:

Example:

Default:

Number of px a image should be loaded before it is in view port

<img ="someDefaultImage" ="imageToLazyLoad" offset="100" />
scrollTarget (optional)

Type:

Example:

Default:

You will need to set this property if you are using a scroll container and do not propagate the scroll event to window.

customObservable (optional)

Type:

Example:

You can pass your own observable if you need more control over the flow. Can be useful if integrating with other frameworks like ionic. See for more information.

useSrcset (optional)

Type:

Example:

You can set this to if you need to lazy load images with attribute, instead of . tags are set to use by default, so you don’t need to set this option additionaly.

Type:

Example:

type:

Exaple:

See for more information.

Events

onStateChange (optional)

Type:

Example:

You can pass a callback function, which will be called when the image is getting into different state.

myCallbackFunction(event: StateChange) {
  switch (event.reason) {
    case 'setup':
      // The lib has been instantiated but we have not done anything yet.
      break;
    case 'observer-emit':
      // The image observer (intersection/scroll/custom observer) has emit a value so we
      // should check if the image is in the viewport.
      // `event.data` is the event in this case.
      break;
    case 'start-loading':
      // The image is in the viewport so the image will start loading
      break;
    case 'mount-image':
      // The image has been loaded successfully so lets put it into the DOM
      break;
    case 'loading-succeeded':
      // The image has successfully been loaded and placed into the DOM
      break;
    case 'loading-failed':
      // The image could not be loaded for some reason.
      // `event.data` is the error in this case
      break;
    case 'finally':
      // The last event before cleaning up
      break;
  }
}

🛠 Setup

Include the library in your module (see app.module.ts):

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule } from 'ng-lazyload-image'; // <-- import it
import { AppComponent } from './app.component';

@NgModule({
  declarations: AppComponent,
  imports: BrowserModule, LazyLoadImageModule, // <-- and include it
  bootstrap: AppComponent,
})
export class MyAppModule {}

IntersectionObserver

is using a intersection observer by default so you don’t need to do anything if you want to continue using the intersection observer as event emitter.

Scroll listener

You can easily swtich from IntersectionObserver to scroll listener by using the :

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image'; // <-- include ScrollHooks
import { AppComponent } from './app.component';

@NgModule({
  declarations: AppComponent,
  imports: BrowserModule, LazyLoadImageModule,
  providers: { provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }, // <-- Declare that you want to use ScrollHooks
  bootstrap: AppComponent,
})
export class MyAppModule {}

See below for more information.

Что такое ленивая загрузка

Lazy Load – метод, предназначенный для отложенной загрузки изображений. Фактически, изображения загружаются только тогда, когда пользователь до них долистал. Ну, или почти долистал.

Без плагинов такой тип загрузки можно подключить только с помощью написания довольно сложной структуры из смеси php/js/css. Также можно использовать готовые решения. Например, jquery.lazyload.js. Но практически все плагины с данной функцией так или иначе используют данную библиотеку. Потому, в данном случае гораздо целесообразнее использовать готовое решение.

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

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

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

Условия таковы:

  • только бесплатные плагины;

  • доступны в репозитории WordPress;

  • обновлялись не позднее, чем пол года назад.

Поехали!

Lazy Load by WP Rocket

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

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

Вес картинок сократился минимально. Фактически, никакого профита от использования данного поделия не вижу. Можете, конечно, попробовать, но если что, я предупреждал.

Smush

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

Я провел несколько тестирований, в итоге результат был примерно такой же.

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

WordPress Infinite Scroll — Ajax Load More

Вылезает по запросу в списке плагинов для WordPress. Ну, просто смотрите на скрины.

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

Lazy Load Optimizer

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

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

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

PageSpeed Ninja

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

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

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

A3 Lazy Load

Безусловный лидер, который не сдружился сходу с некоторыми слайдерами. Но если покопаться в настройках плагина, то с проблемой можно разобраться. Фактически, по результатам — лучший вариант.

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

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

Сделайте сайт быстрым

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

What is lazy loading?

Lazy loading is essentially delaying the loading of images until a user scroll downs the page (images enter within the viewport).

Why is this awesome? Well, let’s say you have a long-form blog post with 100 images in it. By default, the browser will try to load all 100 of those images when someone visits the post. Even with optimized images, this can take a while, especially on mobile.

But if you lazy load the images, it will only load the images towards the top of the page that visitor can see in their browser. The number of images varies based on the type of browser, what type of lazy loading is being used, the size of the viewport, etc. But regardless, the idea is that it usually cuts down on 85%+ of the requests right off the bat.

🥧 Recipes

This is the section where you can find ready to copy & paste code for your convenience.

CSS

img:not():not() {
  visibility: hidden;
}

Just that, really.

Dynamic content

HTML

The HTML to use depends on your case, see other recipes’ HTML

Javascript

var myLazyLoad = new LazyLoad();
// After your content has changed...
myLazyLoad.update();

Mixed native and JS-based lazy loading

HTML

<img class="lazy" alt="A lazy image" data-src="lazy.jpg" />
<iframe class="lazy" data-src="lazyFrame.html"></iframe>
<video class="lazy" controls data-src="lazy.mp4" data-poster="lazy.jpg">...</video>
<div class="lazy" data-bg="lazy.jpg"></div>

Javascript

// Instance using native lazy loading
const lazyContent = new LazyLoad({
  use_native: true // <-- there you go
});

// Instance without native lazy loading
const lazyBackground = new LazyLoad({
  // DON'T PASS use_native: true HERE
});

Scrolling panel(s)

HTML

<div class="scrollingPanel">
  <!-- Set of images -->
</div>

Javascript

var myLazyLoad = new LazyLoad({
  container: document.querySelector(".scrollingPanel")
});

If you have multiple scrolling panels, you can use the following markup and code.

HTML

<div id="scrollingPanel1" class="scrollingPanel">
  <!-- Set of images -->
</div>
<div id="scrollingPanel2" class="scrollingPanel">
  <!-- Set of images -->
</div>

Javascript

var myLazyLoad1 = new LazyLoad({
  container: document.getElementById("scrollingPanel1")
});
var myLazyLoad2 = new LazyLoad({
  container: document.getElementById("scrollingPanel2")
});

Lazy functions

HTML

<div class="lazy" data-lazy-function="foo">...</div>
<div class="lazy" data-lazy-function="bar">...</div>
<div class="lazy" data-lazy-function="buzz">...</div>
<div class="lazy" data-lazy-function="booya">...</div>

JS

// It's a best practice to scope the function names inside a namespace like `lazyFunctions`.
window.lazyFunctions = {
  foo: function (element) {
    element.style.color = "red";
    console.log("foo");
  },
  bar: function (element) {
    element.remove(element);
    console.log("bar");
  },
  buzz: function (element) {
    var span = document.createElement("span");
    span.innerText = " - buzz!";
    element.appendChild(span);
    console.log("buzz");
  },
  booya: function (element) {
    element.classList.add("boo");
    console.log("booya");
  }
};
function executeLazyFunction(element) {
  var lazyFunctionName = element.getAttribute("data-lazy-function");
  var lazyFunction = window.lazyFunctionslazyFunctionName;
  if (!lazyFunction) return;
  lazyFunction(element);
}

var ll = new LazyLoad({
  unobserve_entered: true, // <- Avoid executing the function multiple times
  callback_enter: executeLazyFunction // Assigning the function defined above
});

Use to avoid executing the function multiple times.

That’s it. Whenever an element with the attribute enters the viewport, LazyLoad calls the function, which gets the function name from the attribute itself and executes it.

Lazy initialization of multiple LazyLoad instances

HTML

<div class="horizContainer">
  <img
    src=""
    alt="Row 01, col 01"
    data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_01_col_01&amp;w=200&amp;h=200"
  />
  <img
    src=""
    alt="Row 01, col 02"
    data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_01_col_02&amp;w=200&amp;h=200"
  />
  <!-- ... -->
</div>
<div class="horizContainer">
  <img
    src=""
    alt="Row 02, col 01"
    data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_02_col_01&amp;w=200&amp;h=200"
  />
  <img
    src=""
    alt="Row 02, col 02"
    data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_02_col_02&amp;w=200&amp;h=200"
  />
  <!-- ... -->
</div>

Javascript

var lazyLoadInstances = ;

var initOneLazyLoad = function (horizContainerElement) {
  // When the .horizContainer element enters the viewport,
  // instantiate a new LazyLoad on the horizContainerElement
  var oneLL = new LazyLoad({
    container: horizContainerElement
  });
  // Optionally push it in the lazyLoadInstances
  // array to keep track of the instances
  lazyLoadInstances.push(oneLL);
};

// The "lazyLazy" instance of lazyload is used to check
// when the .horizContainer divs enter the viewport
var lazyLazy = new LazyLoad({
  elements_selector: ".horizContainer",
  callback_enter: initOneLazyLoad,
  unobserve_entered: true // Stop observing .horizContainer(s) after they entered
});

That’s it. Whenever a element enters the viewport, LazyLoad calls the function, which creates a new instance of LazyLoad on the element.

Что такое Lazy Load — отложенная загрузка изображений?

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

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

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

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
Добавить комментарий