使用Javascript加载和缓存图片，并了解HTTP状态码。

Question

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

1. 如果我使用一个图像或虚拟img标签，该图像将被缓存，但我无法在onerror回调中得知HTTP状态码。 2. 如果我使用XHR（jQuery的$.get或angular的$http.get），我可以获得状态代码，但图片不会被缓存（真正的将重新加载数据）。我认为这是由于浏览器规则导致我无法控制缓存。

有一种方法可以实现HTTP状态代码和浏览器缓存图片吗？

- Jiam30

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

- charlietfl

---

可以，那样也可以。所以没有一次调用就能完成的方法吗？ - Jiam30

但是为什么呢？你只关心那些出错的。 - charlietfl

只是试图限制对服务器的调用次数（在提供图像之前执行一些逻辑）。 - Jiam30

onerror 很好，但它并没有提供状态信息。只有额外的调用才会产生错误。如果你遇到了 500 错误，那些错误信息也会出现在你的服务器错误日志中。 - charlietfl