Detecting an image 404 in Javascript

Question

After a user uploads a file we have to do some additional processing with the images such as resizing and upload to S3. This can take up to 10 extra seconds. Obviously we do this in a background. However, we want to show the user the result page immediately and simply show spinners in place until the images arrive in their permanent home on s3.

I'm looking for a way to detect that a certain image failed to load correctly (404) in a cross browser way. If that happens, we want to use JS to show a spinner in it's place and reload the image every few seconds until it can be successfully loaded from s3.

IIRC, there is an onerror event for images... devguru.com/technologies/javascript/10916.asp — scunliffe
– scunliffe, Commented Jun 10, 2010 at 22:48
@Dorathoto why the bounty? The most upvoted answer is the way to go: stackoverflow.com/questions/3019077/… — Guerric P
– Guerric P, Commented Apr 29, 2021 at 17:23

SLaks · Accepted Answer · 2010-06-10 22:48:40Z

67

Handle the <img> element's onerror event.

answered Jun 10, 2010 at 22:48

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

T.J. Crowder Over a year ago

@xal: Just be sure to hook the error event before you set the src property (if you're doing this with new Image or document.createElement("img") rather than via an HTML string). Otherwise, you're in a race condition and the event could fire before you start handling it (just like the load event).

SLaks Over a year ago

@T.J: Not necessarily. Javascript runs on the UI thread, so if you handle the event immediately after setting src, there shouldn't be any risk. However, you're still right,

T.J. Crowder Over a year ago

Javascript runs on the Javascript thread, which on some browsers is also the UI thread. It is not necessarily the download thread. I've helped people fix bugs caused by precisely this, setting src before setting a load handler. There's a race condition there. If you already have the handler registered, the event handling code will put it on the execution stack to be run once the JS thread is available to do something else. If you don't, you can miss the event.

Lukas Over a year ago

Code examples for this: maisonbisson.com/post/12150/…

Tyler Roper Over a year ago

I'd like to comment on this, despite it being somewhat dated at this point, simply because it's a pretty popular question and answer. If an <img> returns a 404, but the response includes an image (a placeholder image, for example), the error event will not be fired.

|

Dorathoto · Accepted Answer · 2023-03-14 18:47:04Z

39

First option:

<img src="picture1.gif" onerror="this.onerror=null;this.src='missing.gif';"/>

Second option:

<html>
<head>
<script type="text/javascript">
    function ImgError(source){
        source.src = "/noimage.gif";
        source.onerror = "";
        return true;
    }
</script>
</head>
<body>
    <img src="image_example1.jpg" onerror="ImgError(this)" />
</body>
</html>

PS: it's pure javascript! you don't need any libraries. (Vanilla JS)

Example in Fidler

https://jsfiddle.net/dorathoto/87wd6rjb/1/

edited Mar 14, 2023 at 18:47

answered Jan 6, 2016 at 16:09

Dorathoto

2607 silver badges19 bronze badges

Comments

j0k · Accepted Answer · 2013-03-28 09:32:18Z

12

From: http://lucassmith.name/2008/11/is-my-image-loaded.html

// First a couple helper functions
function $(id) {
    return !id || id.nodeType === 1 ? id : document.getElementById(id);
}
function isType(o,t) {    return (typeof o).indexOf(t.charAt(0).toLowerCase()) === 0;}

// Here's the meat and potatoes
function image(src,cfg) {    var img, prop, target;
    cfg = cfg || (isType(src,'o') ? src : {});

    img = $(src);
    if (img) {
        src = cfg.src || img.src;
    } else {
        img = document.createElement('img');
        src = src || cfg.src;
    }

    if (!src) {
        return null;
    }

    prop = isType(img.naturalWidth,'u') ? 'width' : 'naturalWidth';
    img.alt = cfg.alt || img.alt;

    // Add the image and insert if requested (must be on DOM to load or
    // pull from cache)
    img.src = src;

    target = $(cfg.target);
    if (target) {
        target.insertBefore(img, $(cfg.insertBefore) || null);
    }

    // Loaded?
    if (img.complete) {
        if (img[prop]) {
            if (isType(cfg.success,'f')) {
                cfg.success.call(img);
            }
        } else {
            if (isType(cfg.failure,'f')) {
                cfg.failure.call(img);
            }
        }
    } else {
        if (isType(cfg.success,'f')) {
            img.onload = cfg.success;
        }
        if (isType(cfg.failure,'f')) {
            img.onerror = cfg.failure;
        }
    }

    return img;
}

And here how to use it:

image('imgId',{
    success : function () { alert(this.width); },
    failure : function () { alert('Damn your eyes!'); },
});

image('http://somedomain.com/image/typooed_url.jpg', {
    success : function () {...},
    failure : function () {...},
    target : 'myContainerId',
    insertBefore : 'someChildOfmyContainerId'
});

edited Mar 28, 2013 at 9:32

j0k

22.8k28 gold badges81 silver badges90 bronze badges

answered Jun 10, 2010 at 22:50

unomi

2,68218 silver badges19 bronze badges

5 Comments

SLaks Over a year ago

This raises a good point. You (OP) need to load the images with random querystring parameters.

mxcl Over a year ago

The link died. This answer should be amended to contain content or have it’s green tick taken away.

Daniele Vrut Over a year ago

KISS (aka Keep It Super Simple)

oriadam Over a year ago

I would change the isType function to a simple typeof cfg.x==='function'. It is more readable than 'f', and also faster - see here: jsperf.com/typeof-variations

Hisagr Over a year ago

This doesn't work if request returns HTTP 404 and fallback image

oasisfleeting · Accepted Answer · 2015-01-11 23:21:25Z

11

just bind the attr trigger on the error event.

$(myimgvar).bind('error',function(ev){
    //error has been thrown
    $(this).attr('src','/path/to/no-artwork-available.jpg');
}).attr('src',urlvar);

answered Jan 11, 2015 at 23:21

oasisfleeting

1111 silver badge2 bronze badges

2 Comments

Bangkokian Over a year ago

This assumes that all failed loads are 404's.

user736893 Over a year ago

OP specifically said 404.

Adam Mac · Accepted Answer · 2018-09-13 08:36:48Z

4

I just did

if ($('#img')[0].naturalWidth > 0) {

as i noticed there was no naturalWidth if the image 404'd.

However, i can understand wanting to use a method above.

answered Sep 13, 2018 at 8:36

Adam Mac

993 bronze badges

Comments

dav1dhunt · Accepted Answer · 2014-07-22 20:15:08Z

3

This worked for me (mine is in coffeescript). You'll need to replace with a spinner instead, of course.

checkImages = ->
  $("img").each ->
    $(this).error ->
      $(this).attr("src", "../default/image.jpg")

$(document).on('page:load', checkImages)

I'm guessing the javascript equivalent is something like

function checkImages() {
  $("img").each(function() {
    $(this).error(function() {
      $(this).attr("src", "../default/image.jpg");
    });
  });
};

$(document).on("page:load", checkImages);

answered Jul 22, 2014 at 20:15

dav1dhunt

1791 silver badge10 bronze badges

Collectives™ on Stack Overflow

Detecting an image 404 in Javascript

6 Answers 6

6 Comments

Comments

5 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

6 Comments

Comments

5 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related