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 ？ |
该项目遵循全企业规范。欢迎任何形式的贡献！
