如何检查背景img是否无法加载？

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

这是一个工作中的小提琴

积分：此答案

Answer 2

我不知道是否有一种方法可以检查客户端javascript是否存在给定的url。 但是您可以尝试使用此技巧。

  <!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>

然后尝试

`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 个解决方案

解决方案1
1 2016-12-19 15:26:09

解决方案2
1 已采纳 2016-12-19 15:47:01

如何检查背景img是否无法加载？

问题描述

2 个解决方案

解决方案1 1 2016-12-19 15:26:09

解决方案2 1 已采纳 2016-12-19 15:47:01

解决方案1
1 2016-12-19 15:26:09

解决方案2
1 已采纳 2016-12-19 15:47:01