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

Question

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

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

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

Answer 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      
       })
    }
 }