Представляем response-cool-img: простой способ оптимизации изображений

фото Нитиш Мина

на Unsplash

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

img

замена тега для вашего проекта React.js.

Характеристики

  • Holders Заполнители для удовлетворения различных состояний загрузки изображения (например, загрузка изображения> фактическое изображение> изображение ошибки).
  • 🛋 Умная ленивая загрузка с производительным и эффективным способом, используя IntersectionObserver,
  • Mechanism Встроенный механизм автоматического повтора. Пользователь не пропустит вашу важную информацию.
  • Any Прервать любую текущую загрузку изображений на компоненте, размонтировать, потенциально экономя пропускную способность и ресурсы браузера.
  • Rendering Поддержка рендеринга на стороне сервера / отключен JavaScript / SEO.
  • 📜 Поддержка Машинопись определение типа.
  • 🦠 Крошечный размер (~ 2,4 КБ в сжатом виде). Никаких внешних зависимостей, кроме
    react

    и

    react-dom

    ,

  • 🔧 Простота в использовании.

Пример использования

реквизиты по умолчанию компонента был настроен с целью оптимизации загрузки. Давайте начнем как следующий пример.
import Img from 'react-cool-img';

// Suggest to use low quality or vector images
import loadingImage from './images/loading.gif';
import errorImage from './images/error.svg';

const App = () => (
  <Img
    placeholder={loadingImage}
    src="https://the-image-url"
    error={errorImage}
    alt="React Cool Img"
  />
);
Не хотите заполнитель изображения? Не беспокойтесь, вы можете использовать встроенные стили или CSS для этого. Компонент полностью совместим с опытом разработки нормальных

img

тег.

import Img from 'react-cool-img';

const App = () => (
  <Img
    style={{ backgroundColor: 'grey', width: '480', height: '320' }}
    src="https://the-image-url"
    alt="React Cool Img"
  />
);

Умный способ загрузки изображений

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

debounce

и

cache

реквизит.

Посредством

debounce

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

import Img from 'react-cool-img';

import defaultImg from './images/default.svg';

const App = () => (
  <Img
    placeholder={defaultImg}
    src="https://the-image-url"
    debounce={1000} // Default is 300 (ms)
    alt="React Cool Img"
  />
);
Посредством

cache

prop, изображения, которые вы уже кэшировали, прервут отложенную загрузку, пока пользователь не посетит ваше приложение в следующий раз. Ленивая загрузка настроена для любых оставшихся изображений, которые не были кэшированы. Это полезно для UX, поскольку не требуется много дополнительной работы для немедленной загрузки кэшированных изображений, и это простой способ сделать интерфейс более интуитивно понятным.

import Img from 'react-cool-img';

import defaultImg from './images/default.svg';

const App = () => (
  <Img
    placeholder={defaultImg}
    src="https://the-image-url"
    cache // Default is true, just for demo
    alt="React Cool Img"
  />
);

Наличие JavaScript и SEO

Есть две проблемы при выполнении отложенной загрузки изображений с рендерингом на стороне сервера. Один из них — доступность Javascript, другой — SEO. К счастью, мы можем использовать
Const Img = () => {
  // ...

  возвращение (
    <>
      Там нет магии
      
    
  
  );
};
Вы также можете установить этот пакет распространяется через НПМ,
$ yarn add react-cool-img
# or
$ npm install --save react-cool-img



Источник: Представляем response-cool-img: простой способ оптимизации изображений


Похожие материалы по теме: Представляем response-cool-img: простой способ оптимизации изображений

Leave a comment