检查图像加载失败

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

检查图像加载失败

Checking for failed image load

javascript

error-handling

jquery

loading-image