javascript - 检查图像加载失败

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('加载') 回调？

尝试检查回调中的 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)
})