我正在尝试创建如下 list :
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" />
我得到本地不可用图像的回退工作,但外部不可用...是否可以为外部资源指定回退?找不到关于这个的文档特别...
请您参考如下方法:
很遗憾,它超出了规范,而且我还没有找到任何可靠的理由来说明原因。对于使用 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 的情况并不常见,因为通常您可以提前显式缓存所有这些资源。