@ws-serenity/react-lazy-image

Repository

About

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

Если необходимо отобразить изображение, которое сразу находится в видимости пользователя стоит использовать:

<!--jsx-->
<LazyImage loading={'eager'}/>

<!--together with (html)-->
<link rel="preload" as="image" href="important.png">

With Bandler

В качестве параметра src можно передать строку (например, url), а можно import модуля:

import { LazyImageProps } from '@ws-serenity/react-lazy-image';

function LazyPng(props: LazyImageProps) {
    const {src, ...rest} = props;
    return (
        <LazyImage
            {...rest}
            src={import(`./assets/png/${src}.png`)}
        />
    )
}
// or

<LazyImage src={'https://some-url/image.jpg'}/>

При необходимости можно скрыть или добавить свой лоадер (по умолчанию используется анимация градиентного бекграудна)

Progressive JPEG

При использовании с progressive Jpeg рекомендуется использовать loading='lazy' (опция по умолчанию) Это позволит использовать все преимущества Progressive изображений: оно будет отрисовываться постепенно улучшая качество.

Подробнее про загрузку изображения

Загрузка изображение происходит в 2 этапа:

1. Импорт JS-module (import('./assets/png/sample.png')). Загрузка отображается для любого типа изображения (eager, lazy)
2. непосредственно загрузка изображения браузером. По ее истечению вызывается событие img.onloadcapture, выключающее лоадер (только для eager)

img.onloadcapture не работает с ленивой загрузкой. Это баг Chromium