Question

正如标题所说。我希望能够确定后台img是否无法加载。我环顾四周，看到了大量的信息，但遗憾的是，他们中的任何一个都无法为我工作。

我看到一个很好的描述使用名为 waitForImages 的插件：https://github.com/alexanderdickson/waitForImages

我似乎无法加载失败的工作。现在，如果有人有更好的方式我全部开放！只要我能得到警告就说它失败了。我推入了一个虚假的URL，所以它应该返回链接不起作用。

代码：

$("#cover-art").css("background-image", 'url("/assets/img/cover-adio.png")');

$('#cover-art').waitForImages(function() {
    alert('All images have loaded.');
}, function(loaded, count, success) {
   alert(loaded + ' of ' + count + ' images has ' + (success ? 'loaded' : 'failed to load') +  '.');
   $(this).addClass('loaded');
});

Answer 1

您可以这样做：

$('<img/>').load("/assets/img/cover-audio.png", function(res, status, xhr) {
    if(status == "error"){
         alert("Image not loaded");
    }
    else{
         $(this).remove(); 
         $("#cover-art").css('background-image', 'url(/assets/img/cover-adio.png)');
    }
});

这是一个有效的Fiddle

致谢：This SO Answer

Answer 2

我不知道是否有办法检查客户端javascript存在的给定网址。但你可以尝试这个技巧。

＆＃13;

    <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    </head>
    <body>

    <div id="mydiv" style="background-image:url('foo.png')">
      <img id="foo_img" src="foo.png" style="display:none;">
      
      <p>Status:<span id="result"></span></p>
    </div>

    </body>
    <script type="text/javascript">
    var imgtowatch = document.getElementById("foo_img");
    var events = ["load", "error"];

    events.forEach(function(ev){
    imgtowatch.addEventListener(ev, function(){
      document.getElementById("result").innerHTML = ev;
    });
    });
    </script>
    </html>

＆＃13;

然后尝试

`style="background-image:url('http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png')`

和

src='http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png'

如何检查后台img是否加载失败？

2 个答案: