检查映像加载失败

Question

在下面的代码中，我将图像标签附加到div。图像加载完成后(成功(，我想在更改页面之前运行其他功能。

var $img = $("<img src='https://www.example.com/path' />").on('load', function() {
         console.log('img loaded');
         //do other stuff
         window.location = "otherpage.com";
         return true;
    });
    $(".imgContainer").append($img);

这在图像实际存在于提供的 URL 中或未被阻止的情况下完美运行。(就我而言，由于我的网络代理设置，在追加图像时出现net::ERR_TUNNEL_CONNECTION_FAILED错误。在其他网络上，它工作正常。

我的问题是，如何测试.on('load'(回调中的404 (Not Found)或net::ERR_TUNNEL_CONNECTION_FAILED错误？

尝试检查回调中的responseText, textStatus, req参数，但显然由于 img 从未加载，因此永远不会调用回调。未启用 CORS。

Answer 1

使用 on('error', handler) 捕获 404

var $img = $("<img src='https://www.example.com/path' />").on('load', function() {
     console.log('img loaded');
}).on('error', function(event){
      console.log('img failed to load');
      console.log(event)
})