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

检查失败的图像加载

1 个答案: