Question

我正在尝试创建一个类似的清单：

CACHE MANIFEST

CACHE:
offline.jpg
http://externalSite/cacheDemo/offline.jpg

FALLBACK:
/   offline.jpg
http://externalSite/    http://externalSite/cacheDemo/offline.jpg

然后在我的HTML

中

<img src="unavailable.jpg" />
<img src="http://externalSite/cacheDemo/unavailable.jpg" />

我得到本地不可用映像的后备工作，但外部没有...是否可以为外部资源指定回退？无法找到关于此的文档......

Answer 1

不幸的是，它超出了规范范围，我没有找到任何可靠的理由。这是使用CDN的任何人的合法需求，或者是开发为12 factor样式应用程序的开发人员（例如，用于在Heroku上托管），其中上载的图像不能修改本地状态，而是需要保存到附加资源。幸运的是，我们仍然可以在Javascript中完成我们需要的工作，但这取决于您尝试回溯的资源类型。

具体来说，您可以依赖onError属性：

<img src="http://externalSite/cacheDemo/unavailable.jpg" onError="this.onError = null; this.src='offline.jpg'" />

请注意，如果后备图像不可用，我们会消除onError以防止无限循环。您可以在以下网址阅读更多相关策略：jQuery/JavaScript to replace broken images

但是，对于.js或.css，这种技术并不可靠，因为它们的onError属性为isn't as supported。但是，回退到异地.js和.css的情况不太常见，因为通常您可以提前显式缓存所有这些资源。

HTML5缓存清单：外部资源的后备

1 个答案: