我正在尝试创建如下 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 的情况并不常见,因为通常您可以提前显式缓存所有这些资源。


评论关闭
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!