react cool img
v1.2.12
Это легкий компонент React <Img /> , который помогает вам обрабатывать изображение UX (пользовательский опыт) и оптимизацию производительности как профессиональный парень?
Он уполномочивает стандартную метку img по многим классным функциям, не нарушая вашего исходного опыта разработки. В идеале это может быть замена метки img для React.js.
⚡ Live Demo: https://react-cool-img.netlify.app
❤ Это ️ на GitHub или твит об этом.
Заполнители для удовлетворения различных состояний загрузки изображения (например, загрузка изображения> Фактическое изображение> Изображение ошибки).
Умная ленивая нагрузка с эффективным и эффективным способом, используя пересекающий наблюдатель.
Встроенный механизм автоматического режима. Пользователь не пропустит вашу важную информацию.
Прерывает любые текущие загрузки изображений на компоненте, не позволяя экономить ресурсы полосы пропускания и браузера.
Поддерживает рендеринг на стороне сервера / JavaScript отключен / SEO.
Поддерживает определение типа типа.
Крошечный размер (~ 2 КБ GZIPPED). Нет внешних зависимостей, кроме react и react-dom .
Простой в использовании.
️ Большинство современных браузеров поддерживают пересечение наблюдателя. Вы также можете добавить полифилл для полной поддержки браузера.
react-cool-img основан на крючках React. Требуется react v16.8+ .
Этот пакет распространяется через NPM.
$ yarn добавить react-cool-img# или $ npm install-save react-cool-img
Реквизиты по умолчанию компонента были точно настроены с целью загрузки оптимизации. Давайте начнем это как следующий пример.
Импорт IMG из "React-cool-img"; // предложить использовать низкое качество или векторное изображение hupingImage из "./images/loading.gif"; Import errorimage из" ./images/error.svg";const app = ( ) => (
<Imgplaceholder = {loadingImage} src = "https: // the-image-url" error = {errorimage} alt = "React Cool Img"
/>); Не хотите заполнителя изображения? Не беспокойтесь, вы можете использовать для него встроенные стили или CSS. Компонент полностью совместим с опытом разработки нормальной метки img .
импортировать IMG из "React-Cool-Img"; const app = () => (
<Imgstyle = {{founalcolor: "grey", ширина: "480", высота: "320"}} src = "https: // the-image-url" alt = "react cool"
/>); Компонент изображения, работающий аналогичным со стандартным тегом img , и со следующим реквизитом.
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
src | нить | Источник изображения. Это required .Форматы поддержки | |
srcSet | нить | Источники изображения для отзывчивых изображений. Только для поддержки src .Справочная статья | |
sizes | нить | Размеры изображений для отзывчивых изображений. Только для поддержки src .Справочная статья | |
width | нить | Ширина изображения в PX. | |
height | нить | Высота изображения в PX. | |
placeholder | нить | Источник изображения заполнителя. Форматы поддержки | |
error | нить | Источник изображения ошибки. Это заменит изображение заполнителя. Форматы поддержки | |
alt | нить | Альтернативный текст для раздела изображения. | |
decode | логический | true | Используйте img.decode (), чтобы предварительно код изображения перед его рендерингом. Полезно, чтобы предотвратить блокирование основной нити путем декодирования большого изображения. |
lazy | логический | true | Включите/выключите ленивую загрузку. Использование пересечения наблюдателя |
cache | логический | true | Мгновенно загрузите изображения, которые были кэшированы, когда это возможно, чтобы прервать ленивое поведение нагрузки. Справочная статья |
debounce | число | 300 | Сколько стоит ждать в миллисекундах, что изображение должно быть в просмотре, прежде чем начать загружаться. Это может предотвратить загрузку изображений, пока пользователь быстро прокручивает их. |
observerOptions | объект | { root: window, rootMargin: '50px', threshold: 0.01 } | См. Раздел Observeroptions. |
retry | объект | { count: 3, delay: 2, acc: '*' } | Смотрите раздел повторной попытки. |
... | Найдите больше реквизита и событий. |
Все свойства optional .
root: Element | null - элемент, который используется в качестве видового порта для проверки видимости цели. Должен быть предком цели. По умолчанию в просмотр браузера, если не указано, или если null .
rootMargin: string - поля вокруг корня. Могут иметь значения, аналогичные свойству CSS Margin, например, "10px 20px 30px 40px" (вверху, справа, внизу, слева). Значения могут быть процентами. Этот набор значений служит для выращивания или сокращения каждой стороны ограничивающего ящика корневого элемента перед вычислением пересечений.
threshold: number - одно число от 0 до 1, которое указывает на то, какой процент видимости цели должен выполняться обратный вызов наблюдателя. Значение 0 означает, как только один пиксель будет виден, обратный вызов будет выполнен. 1 означает, что порог не рассматривается, пока каждый пиксель не будет виден.
Все свойства optional .
count: number - указывает количество раз, когда вы хотите повторно повторить. Установите его на 0, отключите авторетрию.
delay: number - указывает задержку между повторными с секундами.
acc: string | false - указывает, как задержка должна быть накоплена с каждой попыткой. Он принимает следующие значения:
'*' (default) - Умножьте задержку после каждой последующей повторной попытки с помощью данного значения delay , например, delay: 2 означает, что повторная попытка будет работать через 2 секунды, 4 секунды, 8 секунд и т. Д.
'+' - Задержка приращения после каждой повторной попытки с помощью данного значения delay , например, delay: 2 означает, что повторная попытка будет работать через 2 секунды, 4 секунды, 6 секунд и т. Д.
false - Сохраняйте постоянную задержку между повторными поисками, например, delay: 2 означает, что повторный ритм будет работать каждые 2 секунды.
Ленивый изображение загружается через API API -интерсекского наблюдателя. Но может ли быть больше загружать изображение только тогда, когда пользователь хочет его увидеть? Или обходить ленивую загрузку для кэшированных изображений? Ответ-да, и эти функции уже будут встроены в react-cool-img с помощью реквизита debounce и cache .
Под предложением debounce изображение может ждать, чтобы его загрузили, пока оно находится в просмотре для установленного времени. В тех случаях, когда у вас есть длинный список изображений, которые пользователь может непреднамеренно прокручивать. В это время загрузка изображений может вызвать ненужные отходы пропускания и времени обработки.
Импорт IMG из "React-cool-Img"; импорт DefaultImg из "./images/default.svg"; const app = () => (
<Imgplaceholder = {defaultimg} src = "https: // the-image-url" debounce = {1000} // По умолчанию 300 (MS) alt = "React Cool"
/>); Под предложением cache изображения, которые у вас уже кэшируют, будут прервать ленивые загрузки до тех пор, пока пользователь не посетит ваше приложение в следующий раз. Ленивая загрузка настроена для любых оставшихся изображений, которые не были кэшированы. Это полезно для UX, потому что у него не так много дополнительной работы для немедленной загрузки кэшированных изображений и является легкой победой для того, чтобы пользователь выглядел более интуитивно понятным.
Импорт IMG из "React-cool-Img"; импорт DefaultImg из "./images/default.svg"; const app = () => (
<Imgplaceholder = {defaultImg} src = "https: // the-image-url" cache // По умолчанию верно, просто для demoalt = "React Cool Img"
/>); При выполнении ленивого изображения загружаются две проблемы с рендерингом на стороне сервера. Один из них - доступность JavaScript, другой - SEO. К счастью, мы можем использовать тег <noscript> для решения этих проблем. Он сделает фактическое изображение в качестве запасного, если JavaScript отключен, поэтому пользователь не увидит изображение, которое застряло у заполнителя. Более того, тег <noscript> убедитесь, что изображение индексируется с помощью поисковых систем, даже если они не могут полностью понять наш код JavaScript. Посмотрите, как происходит волшебство.
// src/img.tsxconst img = () => {
// ...
return (<> <imgclass = "image" src = "https: // the placeholder-image" alt = " -Кактуал-изображение "alt =" Магия начинается здесь ... "/> </noscript> </>
);}; Наблюдатель по пересечению обладает хорошей поддержкой среди браузеров, но он не универсален. Вам понадобится полифиль -браузеры, которые не поддерживают их. Полифиллы - это то, что вы должны делать сознательно на уровне применения. Поэтому react-cool-img не включает его.
Вы можете использовать полифилл W3C:
$ yarn add recsection-observer# или $ npm install-save recsection-observer
Затем импортируйте его в точку входа вашего приложения:
Импорт "перекресток-бодрствования";
Или используйте динамический импорт, чтобы загрузить файл только тогда, когда требуется полифилл:
(async () => {
if (! ("recsectionObserver" в окне)) wait import ("recsection-observer");}) ();Polyfill.io - это альтернативный способ добавления полифилла при необходимости.
Спасибо этим замечательным людям (ключ эмодзи):
Оправданный ? |
Этот проект следует за спецификацией всех контролей. Взносы любого вида приветствуются!
