【发布时间】：2020-07-27 16:54:12
【问题描述】：
在 javascript 中，我有一个例程，我将 gif 图像从 URL 保存到 localStorage。在下一页重新加载时，我检查 localStorage 中是否有任何内容，如果是 - 我从 localStorage 显示该 gif，而不是从 URL 加载它。效果很好！
我使用了这个脚本： https://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/
问题是它不适用于动画 gif。问题是（至少我是这么认为的）因为在第一页加载 gif 加载到可能只有 2d 和一个帧的 canvas 元素中，因此保存到 localStorage 的 gif 是静态的而不是动画的。当我从 localStorage 读取并显示它时，它将是静态的。
如何将动画 gif 保存到 localStorage，当我加载它并在页面上显示时它仍然是动画？
【问题讨论】：
-
为什么不让浏览器缓存这样做呢？您可以将动画 gif 的链接保存到本地存储，而不是实际的 gif...
-
我试过了，但没用。过了一会儿 gif 不再缓存（真的取决于浏览器、设置、云闪）所以我不能使用它。我需要在网络关闭时显示默认图像，并且只有从 localStorage 加载它才能做到这一点。我知道你的意思 - 我在隐藏的 div 中有 img1 并且在网络关闭时我做了 img2.src = img1.src 但一段时间后它没有工作（这将是最好的解决方案！）。所以我正在尝试保存动画 gif（稍后加载！）。也许这对于某种 blob 东西是可能的，但我不知道。
-
不可以，可以用css隐藏动图，知道网络不通的时候用js显示；不需要为此使用本地存储。
-
我试过了，但是当网络中断并且我这样做时 img2.src = hidden_image.src 有时浏览器会显示损坏的图像（因为它没有尝试从缓存中加载它 - 隐藏的动画 gif）。由于某种原因它重新加载它，但由于网络关闭，它失败了。
-
如果网络中断，您的网站将无法正常工作？