Lazy load 2.0

Использование ленивой загрузки

Ленивая загрузка чаще всего применяется к изображениям. Возможно, вы замечали ее на популярных сайтах типа Buzzfeed. Они используют ленивую загрузку, чтобы контент быстрее отображался в браузере.

Также отложенная загрузка применяется к видео, скриптам и комментариям. По сути, перемещение файлов JavaScript в футер страницы – это способ ускорения загрузки страницы.

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

Бесконечная прокрутка – это альтернатива классической пагинации страниц. При ее использовании дополнительные записи загружаются во время скроллинга страницы вниз. Это можно заметить на Pinterest и Pocket.

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

Как реализовать

Рекомендации Google по реализации lazy loading для картинок

Рекомендации Google для картинок зависят от способа реализации медиаконтента на сайте: встроенные или в CSS. Для встроенных в тег в Справке поисковой системы рекомендуется использовать:

• обработчик событий (например, scroll или resize) – он подходит, если важна совместимость браузеров;
• API-интерфейса обозревателя пересечений – не нужно писать свой код, достаточно зарегистрировать наблюдателя, однако работает не на всех браузерах.

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

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

Готовые решения

В сети есть 5 готовых решений реализации «отложенной загрузки» для изображений:

Lazy loading от David Walsh

Это стандартный и наиболее простой вариант реализации «отложенной загрузки». Действие скрипта заключается в том, что он заменяет атрибут src на data-src в теге . Реализация выглядит следующим образом:

Элементы img, содержащие атрибуты data-src, скрыты в CSS. После того как картинки будут загружены, они плавно отображаются с применением переходов:

Затем JavaScript передаёт всем тегам img атрибут src, которые в итоге получают значение атрибута data-src. После загрузки всех изображений, data-src убирается из img:

Загрузка с прогрессивным улучшением от Robin Osborne

Разработчик предлагает «ленивую загрузку» на основе прогрессивного улучшения. В его решении lazy loading на JS будет считаться улучшением для HTML и CSS.

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

Плагин bLazy.js на простом JS

Стандартная реализация отложенной загрузки этим методом выглядит так:

Среди преимуществ скрипта: он мало весит, работает с несколькими изображениями одновременно, чтобы сэкономить трафик и уменьшить количество запросов на сервер. Также он поддерживает браузеры устаревших версий, в том числе IE 7 и 8 версии.

Плагин Lazy Load XT jQuery

Подойдёт для написания своего скрипта для «ленивой загрузки». Если нужно реализовать lazy loading только для картинок, рекомендуем воспользоваться упрощённой версией.

Для реализации «отложенной загрузки» с помощью этого плагина нужно добавить jQuery-библиотеку перед закрывающимся тегом и указать jquery.lazyloadxt.js.

Есть альтернативный вариант, который позволяет не использовать весь плагин. Это облегчённый скрипт jqlight.lazyloadxt.min.js:

Плагин активируется автоматически или в ручном режиме. В последнем случае нужно ввести:

Размытое изображение от Craig Buckler

Есть несколько вариантов реализации «ленивой загрузки» с эффектом размытости. Наиболее популярный и простой в реализации – Craig Buckler.

У техники высокая производительность: затрачивает немного больше 1 байта JS-кода и 463 байта CSS. Для работы не нужны дополнительные фреймворки или библиотеки. Есть прогрессивное улучшение для поддержки устаревших браузеров или подгрузки картинок при сломанном JavaScript.

Посмотреть код можно в репозитории на GitHub.

3 плагина для WordPress

BJ Lazy Load

Количество установок: более 90 тыс. Последнее обновление: год назад.

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

Lazy Load by WP Rocket

Количество установок: более 20 тыс. Последнее обновление: 17 часов назад.

Плагин работает с миниатюрами, всеми изображениями. Подгружает контент только тогда, когда он становится видимым пользователю. Вес скрипта – 10 КБ. Не использует JavaScript библиотеку jQuery.

Loading Page with Loading Screen

Количество установок: более 10 тыс. Последнее обновление: 2 дня назад.

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

Customizing lazy-loading

By default, WordPress will add a attribute to the following images:

• images within post content ()
• images within post excerpts ()
• images within text widgets ()
• avatarAvatar An avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name. images ()
• template images using ()

Developers can customize this behavior through various filters, the most foundational one being , which receives the following parameters:

• : The boolean default of to filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output..
• : An HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. tag name. While per current WordPress behavior this will always be , it should be noted that and may be expanded to support further elements, e.g. iframes, in the future.
• : A context string as additional parameters, indicating where the image technically comes from, usually a WordPress hook name. Based on how WordPress itself uses lazy-loading, .

For example, if you would like to turn off lazy-loading by default for template images, you could use the following code snippet:

function disable_template_image_lazy_loading( $default, $tag_name, $context ) {
	if ( 'img' === $tag_name && 'wp_get_attachment_image' === $context ) {
		return false;
	}
	return $default;
}
add_filter(
	'wp_lazy_loading_enabled',
	'disable_template_image_lazy_loading',
	10,
	3
);

In order to modify the loading attribute for very specific images, there are two different approaches, depending on the type of images:

For images that appear within a content blob (e.g. , , ), another new filter can be used, which receives the following parameters:

• : The loading attribute value, either “lazy” (default), “eager”, or . If you want to disable lazy-loading for an image, it is strongly recommended to specify so that the attribute is omitted altogether.
• : The entire image HTML tag with its attributes.
• : The context, similar as described for the other filter above.

For example, if you would like to disable lazy-loading for a specific attachment image with ID 42 in size “large” within post content, you could use the following code snippet:

function skip_loading_lazy_image_42_large( $value, $image, $context ) {
	if ( 'the_content' === $context ) {
		$image_url = wp_get_attachment_image_url( 42, 'large' );
		if ( false !== strpos( $image, ' src="' . $image_url . '"' ) {
			return false;
		}
	}
	return $value;
}
add_filter(
	'wp_img_tag_add_loading_attr',
	'skip_loading_lazy_image_42_large',
	10,
	3
);

For images which are output via , the attribute can simply be controlled through the function’s parameter, which can be the same possibles values like the parameter for the above filter. In order to not lazy-load an image, an attribute value of should be specified, which will result in the attribute being omitted. For example:

echo wp_get_attachment_image(
	42,
	'large',
	false,
	array( 'loading' => false ),
);

Theme developers are recommended to granularly handle attributes for images anytime they rely on or another function based on it (such as or ), depending on where they are used within templates. For example, if an image is placed within the template and is very likely to be in the initial viewport, it is advisable to skip the attribute for that image.

Images that are marked as candidates for lazy-loading require the browser to resolve where the image is positioned on the page, and thus as of today slightly delays their fetching. Experiments using Chrome for Android have shown that the impact of such images in the initial viewport on the Largest Contentful Paint metric is fairly small, with a regressionregression A software bug that breaks or degrades something that previously worked. Regressions are often treated as critical bugs or . Recent regressions may be given higher priorities. A «3.6 regression» would be a bug in 3.6 that worked as intended in 3.5. of <1% at the 75th and 99th percentiles compared to non lazy-loaded images – yet it is a consideration to make where theme developers can apply some fine tuning for even better user experience.

See #50425 for further background information on this change.

Testing a fix #

Before we get into how the fix was implemented, let’s look at how lazy-loading works in WordPress today. The most important aspect of the current implementation is that it lazy-loads images above the fold (within the viewport). The CMS blog post this as a pattern to avoid, but experimental data at the time indicated that the effect on LCP was minimal and worth simplifying the implementation in WordPress core.

Given this new data, we created an experimental fix that avoids lazy-loading images that are above the fold and we tested it under the same conditions as the first A/B test.

Change in LCP (ms) by the proposed fix for native image lazy-loading on sample WordPress pages.

Series	default	disabled	fix	Difference from default	Difference from disabled
twentytwentyone-archive-desktop	2,029	1,759	1,749	-14%	-1%
twentytwentyone-archive-mobile	1,657	1,403	1,352	-18%	-4%
twentytwentyone-single-desktop	1,655	1,726	1,676	1%	-3%
twentytwentyone-single-mobile	1,352	1,384	1,342	-1%	-3%

These results are much more promising. Lazy-loading only the images below the fold results in a complete reversal of the LCP regression and possibly even a slight improvement over disabling LCP entirely. How could it be faster than not lazy-loading at all? One explanation is that by not loading below-the-fold images, there’s less network contention with the LCP image, which enables it to load more quickly.

Change in the number of image bytes (KB) by the proposed fix for native image lazy-loading on sample WordPress pages.

Series	default	disabled	fix	Difference from default	Difference from disabled
twentytwentyone-archive-desktop	577	1173	577	0%	-51%
twentytwentyone-archive-mobile	172	378	172	0%	-54%
twentytwentyone-single-desktop	301	850	301	0%	-65%
twentytwentyone-single-mobile	114	378	114	0%	-70%

In terms of image bytes, the fix has absolutely no change as compared to the default behavior. This is great because that was one of the strengths of the current approach.

There are some caveats with this fix. WordPress determines which images to lazy-load on the server-side, which means that it doesn’t know anything about the user’s viewport size or whether images will initially load within it. So the fix uses heuristics about the images’ relative location in the markup to guess whether it will be in the viewport. Specifically, if the image is the first featured image on the page or the first image in the main content, it’s assumed to be above the fold (or close to it), and it will not be lazy-loaded. Page-level conditions like the number of words in the heading or the amount of paragraph text early in the main content may affect whether the image is within the viewport. There are also user-level conditions that may affect the accuracy of the heuristics, especially the viewport size and the usage of anchor links that change the scroll position of the page. For those reasons, it’s important to acknowledge that the fix is only calibrated to provide good performance in the general case and fine-tuning may be needed to make these results applicable to all real-world scenarios.

What is Lazy Loading and How Does it Work?

Lazy loading is an optimization technique that loads visible content but delays the downloading and rendering of content that appears below the fold.  It’s just the sort of thing Google gets excited about, and it’s a technique you should consider if your posts and pages include a lot of embedded videos and high-resolution images.

Lazy loading works like this:

• The browser builds the web page DOM without downloading images and preloading videos.
• JavaScript is used to determine which images to download and which videos to preload based on the content that is initially visible when the page loads. Those images and videos are downloaded and preloaded as appropriate.
• Downloading and rendering of additional videos are delayed until a site visitor scrolls down the page and additional content comes into view.

The end result is that images aren’t downloaded and videos loaded until they are actually needed. This can provide a significant boost in performance for sites that include a lot of high-resolution images and embedded videos.

Framework specifics

Each supported framework may have specific requirements around lazy loading and modules.

Angular

Angular has its own module system and requirements around lazy loading them.

Your lazy loaded feature module should be an which imports .
The `NgModule should be exported from the feature module’s entry point source file.
See contacts.module.ts in the sample app.

Exporting an NgModule

An requires some special processing to wire it into your app.
This processing is handled automatically by UI-Router for Angular when you use the
property instead of in your future state.

When a property is found, UI-Router builds the function with special processing and assigns it to the state.
For more details on , see the .

loadChildren example

AngularJS

AngularJS doesn’t officially support lazy loading of components, services, etc.
However, third party libraries such as ocLazyLoad provide this functionality.

Lazy loading components

Lazy loading components is very simple with UI-Router and ocLazyLoad.
The component is loaded and registered with ocLazyLoad, then the state is activated.

Lazy loading a component

Lazy loading Future States

Your future state’s function tells ocLazyLoad to load the module bundle.

Lazy loading future states

Your AngularJS feature module should register all states and components as you normally would.

Registering lazy loaded states

Webpack

Webpack users should use (or just ) in combination with ocLazyLoad.
When the module is loaded, pass the AngularJS module object to ;
See for an example.

Chaining `System.import` and `$ocLazyLoad.load()`

React

The future state’s function should load the module code.
See in the sample app.

Lazy loading the module

The module should export a variable which contains the module’s states (as an array).
UI-Router will register those states before retrying the transition.
See in the sample app.

Exporting the states as an array

What is Image Lazy Loading?

Lazy Loading Images is a set of techniques in web and application development that defer the loading of images on a page to a later point in time — when those images are actually needed, instead of loading them up front. These techniques help in improving performance, better utilization of the device’s resources, and reducing associated costs.

Here is a quick video to help you understand better:

The word “lazy” in the English language is often attributed to the act of avoiding work as long as possible.

Similarly, lazy loading defers the loading of resources on the page till they are actually needed. Instead of loading these resources as soon as the page loads, which is what normally happens, the loading of these resources is put off till the moment the user actually needs to view them.

The technique of lazy loading can be applied to almost all the resources on a page. For example, in a single page application, if a JS file is not needed until later, it is best not to load it initially. If an image is not needed up front, load it later when it actually needs to be viewed.

Загрузка каких изображений может быть отложена?

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

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

Асинхронная загрузка картинок и фреймов

«Презентацию» скрипта lazy-load следует начать с некоторых разъяснений. Во-первых, для правильной работы скрипт должен запускаться после полной загрузки HTML и постройки DOM-дерева, т. е. наступления события . Во-вторых, в HTML-разметке у элементов, которые планируется загружать асинхронно, будет присутствовать атрибут , указывающий на оригинальный источник ресурса, — с его помощью происходит поиск элементов, для которых необходимо инициализировать lazy-load, поэтому, чтобы отложенная загрузка заработала на желаемом элементе, к нему достаточно будет добавить указанный атрибут с источником. В-третьих, при использовании скрипта следует заранее позаботиться о шаблонах, которые станут отображаться взамен оригинального элементов. Наконец, настройки скрипта учитывают варианты отображения оригинального контента — по требованию пользователя и автоматически, для чего применяются описанные выше события: ,  — непосредственно на самих элементах, а , и  — для окна браузера, если требуется отследить попадание во viewport.

JavaScript

В качестве единственного аргумента в метод init() функции «ленивой» загрузки должен передаваться объект с предварительными настройками, содержащий:

1. название селектора, по которому через выбираются необходимые элементы;
2. указание на событие, активирующее замену атрибута на оригинальный, — , или (попадание во viewport);
3. callback-функцию, вызываемую во время загрузки источника.

Скрипт представлен в самом тривиальном исролнении и работает по следующей схеме: выборка всех необходимых элементов на странице, проверка их на наличие атрибута и источника оригинального ресурса (атрибут ), установка событий на окно или на сами элементы в зависимости от выбранного способа отображения контента, замена у конкретного элемента на содержимое в при наступлении соответствующих событий. Для удобства добавлено информирование через консоль браузера об ошибках, возникающих при поиске элементов, при добавлении элемента без атрибута , при отсутствии или неудачной загрузке (событие ) оригинального источника. Если на сайте есть картинки, которые могут не загрузиться из-за ошибки в источнике, рекомендуется также добавить CSS для «сломанных» изображений.

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

CSS-оформление

Чтобы добавить к lazy-элементам CSS, можно указать следующие селекторы:

Благодаря callback-функции к загружаемой картинке можно добавить класс и настроить эффект появления на свой вкус. В примере ниже это реализовано посредством и .

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

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

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

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

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

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

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

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

FAQ #

Are there plans to automatically lazy-load images in Chrome?

Chromium already automatically lazy-loads any images that are well suited to being deferred if Lite mode is enabled on Chrome for Android. This is primarily aimed at users who are conscious about data-savings.

Can I change how close an image needs to be before a load is triggered?

These values are hardcoded and can’t be changed through the API. However, they may change in the future as browsers experiment with different threshold distances and variables.

Can CSS background images take advantage of the attribute?

How does the attribute work with images that are in the viewport but not immediately visible (for example: behind a carousel, or hidden by CSS for certain screen sizes)?

What if I’m already using a third-party library or a script to lazy-load images?

The attribute should not affect code that currently lazy-loads your assets in any way, but there are a few important things to consider:

1. If your custom lazy-loader attempts to load images or frames sooner than when Chrome loads them normally—that is, at a distance greater than the — they are still deferred and load based on normal browser behavior.
2. If your custom lazy-loader uses a shorter distance to determine when to load a particular image than the browser, then the behavior would conform to your custom settings.

One of the important reasons to continue to use a third-party library along with is to provide a polyfill for browsers that do not yet support the attribute.

How do I handle browsers that don’t yet support lazy-loading?

Create a polyfill or use a third-party library to lazy-load images on your site. The property can be used to detect if the feature is supported in the browser:

For example, lazysizes is a popular JavaScript lazy-loading library. You can detect support for the attribute to load lazysizes as a fallback library only when isn’t supported. This works as follows:

• Replace with to avoid an eager load in unsupported browsers. If the attribute is supported, swap for .
• If is not supported, load a fallback (lazysizes) and initiate it. As per lazysizes docs, you use the class as a way to indicate to lazysizes which images to lazy-load.

Here’s a demo of this pattern. Try it out in a browser like Firefox or Safari to see the fallback in action.

The lazysizes library also provides a loading plugin that uses browser-level lazy-loading when available but falls back to the library’s custom functionality when needed.

Is lazy-loading for iframes also supported in Chrome?

was recently standardized and is already implemented in Chromium. This allows you to lazy-load iframes using the attribute. A dedicated article about iframe lazy-loading will be published on web.dev shortly.

The attribute affects iframes differently than images, depending on whether the iframe is hidden. (Hidden iframes are often used for analytics or communication purposes.) Chrome uses the following criteria to determine whether an iframe is hidden:

• The iframe’s width and height are 4 px or smaller.
• or is applied.
• The iframe is placed off-screen using negative X or Y positioning.

If an iframe meets any of these conditions, Chrome considers it hidden and won’t lazy-load it in most cases. Iframes that aren’t hidden will only load when they’re within the . A placeholder shows for lazy-loaded iframes that are still being fetched.

How are images handled when a web page is printed?

Although the functionality isn’t in Chrome currently, there’s an open issue to ensure that all images and iframes are immediately loaded if a page is printed.

Does Lighthouse recognize browser-level lazy-loading?

Earlier versions of Lighthouse would still highlight that pages using on images required a strategy for loading offscreen images. Lighthouse 6.0 and above better factor in approaches for offscreen image lazy-loading that may use different thresholds, allowing them to pass the Defer offscreen images audit.

Что такое lazy loading изображений

Lazy loading или «ленивая загрузка» — это способ отложенной загрузки изображений, когда картинки подгружаются не сразу вместе с запрашиваемой страницей, а по мере надобности, асинхронно. Функция работает на технологии AJAX с помощью JavaScript.

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

Варианты отложенного отображения контента:

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

На демонстрационной странице indexoid.com/speed картинки загружаются по мере просмотра:

Отображение загрузки картинок на странице при скроллингеКод страницы indexoid.com/speed

Не стоит настраивать такую загрузку для элементов на первом экране — они должны загружаться сразу же, как только пользователь зашел на страницу.

Как ПС относятся к отложенной загрузке

Раньше у Google была проблема с индексированием контента с атрибутом loading, сейчас бот воспринимает такие элементы. Но нужно убедиться, что все материалы страницы доступны для Googlebot.

📺 Demos

Didn’t find the that exactly matches your case? We have demos!

The demos folder contains 30+ use cases of vanilla-lazyload. You might find there what you’re looking for.

Type	Title	Code	Demo
Content	Simple lazy loaded images, not using any placeholder	Code
Content	Lazy images that use an inline SVG as a placeholder	Code
Content	Lazy images that use an external SVG file as a placeholder	Code
Content	Lazy responsive images with	Code
Content	Lazy responsive images with the tag and the attribute (art direction)	Code
Content	Lazy responsive images with and (using )	Code
Content	Lazy responsive images with and (using plain )	Code
Content	Lazy video with multiple tags, different preload options, NO autoplay	Code
Content	Lazy video with multiple tags, different preload options, WITH autoplay	Code
Content	Lazy loading background images	Code
Content	Lazy loading multiple background images	Code
Content	Lazy WebP images with the tag and the attribute for WebP	Code
Asynchronous loading LazyLoad with requireJS	Code
Asynchronous loading LazyLoad + InterserctionObserver with requireJS	Code
Asynchronous loading LazyLoad with	Code
Asynchronous loading multiple LazyLoad instances with	Code
Technique	Fade in images as they load	Code
Technique	Lazily create lazyload instances	Code
Technique	Lazily execute functions as specific elements enter the viewport	Code
Technique	How to manage the print of a page with lazy images	Code
Technique	A popup layer containing lazy images in a scrolling container	Code
Settings	Multiple scrolling containers	Code
Settings	Single scrolling container	Code
Methods	How to LazyLoad	Code
Methods	Adding dynamic content, then LazyLoad	Code
Methods	Adding dynamic content, then LazyLoad passing a NodeSet of elements	Code
Methods	Load punctual images using the method	Code
Methods	Load all images at once using	Code
Test	Test for multiple thresholds	Code
Test	Test behaviour with hidden images	Code
Test	Test performance, lazy loading of hundreds of images	Code
Native	Test the native lazy loading of images WITHOUT any line of javascript, not even this script	Code
Native	Test the native lazy loading of images conditionally using the option (see API)	Code