Question

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

如果我使用Image或虚拟<img/>标记，图像会被缓存，但我无法知道onerror回调中的HTTP状态代码。
如果我使用XHR（$.get用于jQuery或$http.get用于角度），我会获取状态代码但图像未缓存（真实<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      
       })
    }
 }

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

1 个答案: