react cool img
v1.2.12
這是一個輕巧的React <Img />組件，它可以幫助您作為專業人士處理Image UX（用戶體驗）和性能優化？
它通過許多很酷的功能賦予標準img標籤，而不會破壞您的原始開發體驗。理想情況下，它可以是react.js的img標籤。
⚡️實時演示：https：//reaeact-cool-img.netlify.app
❤️它在github上或推特上有關它。
滿足各種圖像加載狀態的佔位符（例如，加載圖像>實際圖像>錯誤圖像）。
使用相交觀察者，智能懶惰加載具有性能和高效方式。
內置自動重新返回機制。用戶不會錯過您的重要信息。
中止任何當前圖像下載的組件下載可能會保存帶寬和瀏覽器資源。
支持服務器端渲染 / JavaScript被禁用 / SEO。
支持打字稿類型定義。
微小的尺寸（〜2kb Gzpipped）。沒有外部依賴性，而對react和react-dom 。
便於使用。
配x 大多數現代瀏覽器本地都支持交叉點觀察者。您還可以添加polyfill以進行完整的瀏覽器支持。
react-cool-img基於React鉤子。它需要react v16.8+ 。
該軟件包是通過NPM分發的。
$ YARN添加React-Cool-Img＃或$ npm安裝 - 儲蓄React-cool-img
該組件的默認道具進行了微調，以便加載優化。讓我們從下面的示例開始。
從“ react-cool-img”導入img; //建議使用“ ./images/loading.gif”; import errorimage from'./images/images/error.svg";const app =（（ ）=>（（
<imgplaceholder = {loadingImage} src =“ https：// the-image-url” error = {errorimage} alt =“ react cool cool img”
/>）;不想要圖像佔位符？不用擔心，您可以使用內聯樣式或CSS。該組件與普通img標籤的開發體驗完全兼容。
從“ react-cool-img”導入img; const app =（）=>（
<imgStyle = {{backgroundColor：“灰色”，寬度：“ 480”，高度：“ 320”}} src =“ https：// the-image-image-url” Alt =“ eact cool cool cool img”
/>）;與標準img標籤和以下道具相似的圖像組件。
| 支柱 | 類型 | 預設 | 描述 |
|---|---|---|---|
src | 細繩 | 圖像源。這是required 。支持格式 | |
srcSet | 細繩 | 響應式圖像的圖像源。僅適用於src Prop。參考文章 | |
sizes | 細繩 | 響應式圖像的圖像大小。僅適用於src Prop。參考文章 | |
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 } | 請參閱《觀察者》部分。 |
retry | 目的 | { count: 3, delay: 2, acc: '*' } | 請參閱“重試”部分。 |
... | 查找更多道具和事件。 |
所有屬性都是optional 。
root: Element | null用作檢查目標可見性的視口的元素。必須是目標的祖先。如果未指定或null ，則默認為瀏覽器視口。
rootMargin: string - 根周圍的邊緣。可以具有類似於CSS保證金屬性的值，例如"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加載的懶惰圖像很好。但是，只有在用戶想查看它的情況下，只有下載圖像才能更大？還是用於緩存圖像的旁路懶負荷？答案是肯定的，這些功能已經通過debounce和cache道具內置在react-cool-img中。
通過debounce Prop，可以等待在視口固定的時間內下載圖像。如果您有一長串用戶可能會無意中滾動的圖像列表。此時，加載圖像可能會導致不必要的浪費帶寬和處理時間。
從“ react-cool-img”導入img; import defaultimg從“ ./images/default.svg";const app =（）=（）=>（
<imgplaceholder = {defaultimg} src =“ https：// the-image-url” debounce = {1000} //默認值為300（ms）alt alt =“ react cool cool cool img”
/>）;通過cache道具，您已經緩存的圖像將中止懶惰加載，直到下次用戶訪問您的應用程序。為未緩存的任何剩餘圖像設置懶負荷。這對UX很有幫助，因為立即加載緩存的圖像沒有太多額外的工作，這對於使UI看起來更直觀是一個容易的勝利。
從“ react-cool-img”導入img; import defaultimg從“ ./images/default.svg";const app =（）=（）=>（
<imgplaceholder = {defaultimg} src =“ https：// the-image-url”緩存//默認值為true，僅適用於demoalt =“ react cool cool img”
/>）;用服務器端渲染進行懶惰的圖像加載時，面臨兩個挑戰。一個是JavaScript可用性，另一個是SEO。幸運的是，我們可以使用<noscript>標籤來解決這些問題。如果禁用JavaScript，它將將實際圖像呈現為後備，從而將用戶看不到被佔位符的圖像。此外， <noscript>標籤可以確保搜索引擎機器人索引圖像，即使它們無法完全理解我們的JavaScript代碼。看看魔術如何發生。
// src/img.tsxconst img =（）=> {
// ...
返回（<> <imgclass =“ image” src =“ https：//the-placeholder-image” alt =“沒有魔術”/> <noscript> <img class =“ image” src =“ src =” https：/ / -Alt-image“ alt =”魔術在這裡開始...”/> </noscript> </>
）;};交叉點觀察者在瀏覽器中得到了良好的支持，但這並不普遍。您需要進行不支持它的瀏覽器。 Polyfills是您應該在申請級上有意識地做的事情。因此， react-cool-img不包括它。
您可以使用W3C的polyfill：
$ YARN添加交點 - 觀察者＃或$ npm安裝-Save交叉點 - 觀察者
然後在您的應用程序的輸入點導入它：
導入“相交 - 觀察者”；
或使用動態導入僅在需要多填充時加載文件：
（async（）=> {
if（！（窗口中的“ InterSectionObserver”））等待導入（“ Intersection-Observer”）;}）（）;polyfill.io是在需要時添加多填充的另一種方法。
謝謝這些好人（表情符號鑰匙）：
welly ？ |
該項目遵循全企業規範。歡迎任何形式的貢獻！
