使用 Javascript 加载和缓存图像并了解 HTTP 状态代码答案

【问题标题】：Load and cache images with Javascript and know HTTP status code使用 Javascript 加载和缓存图像并了解 HTTP 状态代码
【发布时间】：2017-02-22 17:27:11
【问题描述】：

我正在尝试预加载图像以删除那些会响应 404 或 500 HTTP 状态代码的图像。 我需要知道什么是 HTTP 状态代码并且我需要缓存图像。这是我的问题：

如果我使用Image 或虚拟<img/> 标记，图像会被缓存，但我无法知道onerror 回调中的HTTP 状态代码。
如果我使用 XHR（$.get 用于 jQuery 或 $http.get 用于 angular），我会得到状态代码，但图像不会被缓存（真正的 <img/> 将再次加载数据）。我认为我无法控制缓存，因为这是浏览器规则。

有没有一种方法可以让浏览器缓存HTTP状态代码和图像？

【问题讨论】：

标签： javascript jquery html angularjs caching

【解决方案1】：

通过让onerror 触发请求以获取更多详细信息，从而结合使用两者

var img= document.createElement('img');
img.src="....";

img.onerror = function(err){
   $.get(img.src).fail(xhr){
        //parse xhr details and do something with them      
   })
}

请注意，这将受到跨域来源的 CORS 限制

或者如果这是在分配给图像元素的指令中：

 link:function(scope, element){
    element[0].onerror = function(err){
       $.get(element[0].src).fail(xhr){
          //parse xhr details and do something with them      
       })
    }
 }

【讨论】：

当然可以。所以没有办法一键搞定？
但是为什么呢？你只关心那些出错的。
只是试图限制对服务器的调用次数（在提供图像之前会执行一些逻辑）。
好吧onerrror 不提供状态。只有额外的调用才会是错误。如果您收到 500 个错误，这些错误也会出现在您的服务器错误日志中。