react cool img
v1.2.12
これは軽量のReact <Img />コンポーネントであり、画像UX（ユーザーエクスペリエンス）とプロの男としてのパフォーマンスの最適化を処理するのに役立ちますか？
元の開発体験を破ることなく、多くのクールな機能によって標準のimgタグを強化します。理想的には、React.jsのimgタグの交換にすることができます。
https：//react-cool-img.netlify.app
GithubまたはTweetでit§yこれ。
さまざまな画像読み込み状態を満たすためのプレースホルダー（例：画像>実際の画像>エラー画像）。
交差点オブザーバーを使用して、パフォーマンスで効率的な方法でスマートな怠zyなロード。
組み込みの自動回復メカニズム。ユーザーはあなたの重要な情報を見逃すことはありません。
コンポーネントの現在の画像のダウンロードを中止します。
サーバー側のレンダリング / JavaScriptは無効 / SEOをサポートします。
タイプスクリプトタイプの定義をサポートします。
小さなサイズ（〜2kb gzipt）。外部依存関係はありreact-domんreact
使いやすい。
ショ和 ほとんどの最新のブラウザは、交差点オブザーバーをネイティブにサポートしています。完全なブラウザサポートにポリフィルを追加することもできます。
react-cool-img Reactフックに基づいています。 react v16.8+が必要です。
このパッケージはNPMを介して配布されます。
$ YARNは、React-Cool-Img＃または$ npmのインストールを追加します
コンポーネントのデフォルトの小道具は、最適化の読み込みを目的として微調整されています。次の例として始めましょう。
"React-cool-img"からimgをインポート; //低品質またはベクトルImages import loadingimageを使用することをお勧めします。 ）=>（
<imgplaceholder = {loadingimage} src = "https：// the-image-url" error = {errorimage} alt = "React cool img"
/>）;画像プレースホルダーが必要ではありませんか？心配する必要はありません。インラインスタイルまたはCSSを使用できます。コンポーネントは、通常のimgタグの開発エクスペリエンスと完全に互換性があります。
"React-cool-img"; const app =（）=>（
<imgstyle = {{{backgroundcolor： "gray"、width： "480"、height： "320"}} src = "https：// the-image-url" alt = "React cool img"
/>）;画像コンポーネントは、標準のimgタグと次の小道具で同様に動作します。
| 小道具 | タイプ | デフォルト | 説明 |
|---|---|---|---|
src | 弦 | 画像ソース。 required 。サポート形式 | |
srcSet | 弦 | レスポンシブ画像の画像ソース。 src Propのみ。参照記事 | |
sizes | 弦 | レスポンシブ画像の画像サイズ。 src Propのみ。参照記事 | |
width | 弦 | PXの画像の幅。 | |
height | 弦 | PXの画像の高さ。 | |
placeholder | 弦 | プレースホルダー画像ソース。 サポート形式 | |
error | 弦 | エラー画像ソース。プレースホルダーの画像を置き換えます。 サポート形式 | |
alt | 弦 | 画像セクションの代替テキスト。 | |
decode | ブール | true | img.decode（）を使用して、レンダリングする前に画像を事前にデコードします。大きな画像をデコードすることでメインスレッドがブロックするのを防ぐのに役立ちます。 |
lazy | ブール | true | Lazy Loadingをオン/オフにします。 交差点オブザーバーを使用します |
cache | ブール | true | 怠zyな荷重動作を中止するために、可能な限りキャッシュされた画像を即座にロードします。 参照記事 |
debounce | 番号 | 300 | ロードを開始する前に、画像がビューポートにある必要があるというミリ秒でどれだけ待つか。これにより、ユーザーがすぐにスクロールしている間、画像がダウンロードされないようにします。 |
observerOptions | 物体 | { root: window, rootMargin: '50px', threshold: 0.01 } | ObserVeroptionsセクションを参照してください。 |
retry | 物体 | { count: 3, delay: 2, acc: '*' } | 再試行セクションを参照してください。 |
... | より多くの小道具やイベントを見つけてください。 |
すべてのプロパティはoptionalです。
root: Element | nullターゲットの可視性をチェックするためのビューポートとして使用される要素。ターゲットの祖先でなければなりません。指定されていない場合、またはnullの場合、ブラウザビューポートにデフォルト。
rootMargin: string - ルートの周りのマージン。 "10px 20px 30px 40px" （上、右、下、左）など、CSSマージンプロパティと同様の値を持つことができます。値はパーセンテージになります。この一連の値は、交差を計算する前に、ルート要素の境界ボックスの両側を成長または縮小するのに役立ちます。
threshold: number -0から1の間の単一の数字は、ターゲットの可視性の割合を示しています。オブザーバーのコールバックは実行する必要があります。 0の値は、1つのピクセルが表示されるとすぐに、コールバックが実行されます。 1は、すべてのピクセルが表示されるまで、しきい値が通過したとは見なされないことを意味します。
すべてのプロパティはoptionalです。
count: number - 再試行する回数を指定します。 0に設定すると、Auto-Retryが無効になります。
delay: number - 秒単位の遅延を指定します。
acc: string | false -各再試行で遅延を蓄積する方法を指定します。次の値を受け入れます。
'*' (default) - 後続の各再試行後に指定されたdelay値を増やした後、たとえばdelay: 2の平均再試行は2秒後、4秒、8秒などに実行されます。
'+' - 指定されたdelay値による各再試行後の増分遅延、例えばdelay: 2平均再試行は2秒、4秒、6秒などに実行されます。
false -Retriesの間に遅延を一定に保ちますdelay: 2
交差点オブザーバーAPIを介した怠zyな画像の読み込みは良いです。しかし、ユーザーがそれを見たいときにのみ画像をダウンロードする方が大きいのでしょうか？または、キャッシュされた画像の怠zyなロードをバイパスしますか？答えはイエスであり、これらの機能はすでにdebounceとcache小道具によってreact-cool-imgに組み込まれています。
debounce小道具では、画像は、設定された時間のビューポートにあるときにダウンロードするのを待つことができます。ユーザーが不注意にスクロールする可能性のある画像の長いリストがある場合。この時点で、画像をロードすると、帯域幅と処理時間の不必要な無駄が発生する可能性があります。
IMGを「React-Cool-Img」からインポート; "from" from "from" from "。/images/default.svg";constapp =（）=>（
<imgplaceholder = {defaultimg} src = "https：// the-image-url" debounce = {1000} //デフォルトは300（ms）alt = "race cool img"
/>）; cache小道具では、すでにキャッシュされている画像は、ユーザーが次回アプリにアクセスするまで怠zyなロードを中止します。怠zyなロードは、キャッシュされていない残りの画像用に設定されています。これはUXに役立ちます。なぜなら、キャッシュされた画像をすぐにロードするための余分な作業があまりなく、UIをより直感的に見せるための簡単な勝利だからです。
IMGを「React-Cool-Img」からインポート; "from" from "from" from "。/images/default.svg";constapp =（）=>（
<imgplaceholder = {defaultimg} src = "https：// the-image-url" cache //デフォルトはtrue、demoalt = "race cool img"
/>）;サーバー側のレンダリングで怠zyな画像ロードを行うとき、2つの課題があります。 1つはJavaScriptの可用性です。もう1つはSEOです。幸いなことに、 <noscript>タグを使用してこれらの問題を解決できます。 JavaScriptが無効になっている場合、実際の画像をフォールバックとしてレンダリングします。さらに、 <noscript>タグは、JavaScriptコードを完全に理解できない場合でも、画像が検索エンジンボットによってインデックス作成されるようにします。魔法がどのように起こるかを見てください。
// src/img.tsxconst img =（）=> {
// ...
return（<> <imgclass = "image" src = "https：// the-placeholder-image" alt = "魔法はありません"/> <noscript> <img class = "image" src = "https：// the -actual-image "alt ="魔法がここから始まります... "/> </noscript> </>
）;};交差点オブザーバーはブラウザの間で良いサポートを持っていますが、それは普遍的ではありません。サポートしていないブラウザをポリフィルする必要があります。ポリフィルは、アプリケーションレベルで意識的にすべきことです。したがって、 react-cool-imgは含まれていません。
W3Cのポリフィルを使用できます。
$ YARN交差点 - 観察者＃または$ npmインストール - save交差点 - 観察者を追加します
次に、アプリのエントリポイントでインポートします。
「交差点 - 観察者」をインポートします。
または、動的インポートを使用して、ポリフィルが必要な場合にのみファイルをロードします。
（async（）=> {
if（！（ "IntersectionObserver" in Window））がインポート（ "Intersection-Observer"）;}）（）を待っています。polyfill.ioは、必要に応じてポリフィルを追加する代替方法です。
これらの素晴らしい人々に感謝します（絵文字キー）：
ウェリー ？ |
このプロジェクトは、全委員会の仕様に従います。あらゆる種類の貢献を歓迎します！
