How to check if background img failed to load?

Question

As title says. I want to be able to determine if a background img failed to load. I looked around and seen loads of information but sadly cant get any of them to work for me.

I seen a pretty good one describing to use a plugin called waitForImages located: https://github.com/alexanderdickson/waitForImages

I cant seem to get the failed to load work. Now, if someone has a better way im all open! As long as i can get an alert to say it failed. I pushed in a fake URL so it should come back with link not working.

Code:

$("#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');
});

check this out http://stackoverflow.com/questions/1977871/check-if-an-image-is-loaded-no-errors-in-javascript — Paul Fitzgerald, Dec 19 '16 at 14:57
I tried most of them but they are for img tag not background img? If they are for background img also, not sure how to connect it to that now. — William, Dec 19 '16 at 14:59

score 1 · Answer 1 · edited May 23 '17 at 12:13

1

You can do something like this:

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

Here's a working Fiddle

Credits: This SO Answer

edited May 23 '17 at 12:13

Community

1
1

answered Dec 19 '16 at 15:26

philantrovert

9,904
3
37
61

This looks so promising but it always gets a status of success? Not sure why? I console logged status and always comes back with success. When the location i put in doesnt exist? – William Dec 19 '16 at 15:37
@irishwill200 Well that sounds weird. The fiddle works fine if I change the URL. – philantrovert Dec 19 '16 at 16:25
If i use your fiddle code it works, but as soon as i change the code to suit my local image on the server it comes back with success? Even when the url is fake ._. – William Dec 19 '16 at 17:36
@irishwill200 Try to debug it. You don't see any errors in the console whatsoever? – philantrovert Dec 20 '16 at 06:38
No errors coming up, such a shame it doesnt work. Thanks though! – William Dec 20 '16 at 10:49

score 1 · Accepted Answer · answered Dec 19 '16 at 15:47

I don't know if there is a way to check given url exists with client side javascript. But you can try this trick.

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

then try with

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

and

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

How to check if background img failed to load?

2 Answers2