JS/React/超时后从镜像加载下一个映像

Question

我选择在IPFS上为一个网站托管我的所有图像，它们被固定得很好。这减少了从我的托管提供商到免费层的流量和成本。

有时IPFS url加载不够快，因为这取决于用户所在的位置，并且声称缓存IPFS结果的CDN对我不起作用(他们找不到要缓存的哈希(

所以我想要一个替代方案，我想允许从IPFS加载图像的一些延迟，然后回退到直接从服务器加载图像。

这不仅仅是图像，基本上似乎应该有条件地填充来自各种资源的src标签。或者，预加载脚本可以尝试加载资源，然后超时并加载它们。除非绝对必要，否则我不希望从我的服务器下载这些资源，对于这个应用程序和受众来说，优化网站的理论加载速度并没有那么重要。理想情况下，我可以在前端代码中完成所有这些。是否有人有条件地从镜像加载资源？

Answer 1

您可以检查一段时间后是否没有加载图像。让我们制作一个新组件<ImageWithFallback>

const ImageWithFallback = ({src, fallbackSrc}) => {
const [srcToUse, setSrcToUse] = useState(src)
const imgLoadedOnInitSrc = useRef(false)

useEffect(() => {
const timer = setTimeout(() => {
if (!imgLoadedOnInitSrc.current) setSrcToUse(fallbackSrc)
}, 5000)
return () => clearTimeout(timer)
}, [])

return <img src={srcToUse} onLoad={() => {imgLoadedOnInitSrc.current = true} />
}

不过我不建议这样做你想做的事情在客户身上无法可靠地完成。使用手机等慢速连接的人可能会回到你的服务器上，或者住在很远的地方。你无法判断是最终用户连接缓慢，还是服务器连接缓慢。因此，您可能会收到比预期更多的服务器请求。

一种更稳定的方法可能是向服务器和IPFS服务器发出初始请求，并测量延迟，如果百分比差异超过阈值，则决定所有映像的基本主机名。然而这意味着这个初始检查也会导致服务器上的流量；对于连接速度较慢的用户来说，这样做本身会降低页面加载速度。

真的，你需要有工作可靠的CDN。