How to determine error code on broken images with mootools

Question

I need a script that can determine the reason an image didn't load based on the HTTP status code supplied.

I am aware of the onError event on images and objects, but it does not pass the error code. So if an image has a broken source or a time out occurred are dealt with the same way.

What I would like is to have a script that can determine the error code and act accordingly. For example:

• 404 - replace image with a predefined one
• 403 - notify admin using an callback function
• 504 - try to reload
• etc.

I've done some searching on google, but other than the onError event I came up short.

Any ideas?

Answer 1

the only thing i can think of is to go to a xhr request on fail, with Asset.image from more handling the loading:

new Asset.image('foo.jpg', {
    onload: function() {
        someel.adopt(this);
    },
    onerror: function() {
        new Request({
            url: this.get('src'),
            onComplete: function() {
                console.log(this.status); // 404
            }
        }).get();
    }

});

http://jsfiddle.net/dimitar/2hwej/

not exactly the greatest as it would mean 2 requests. to go around that, you can put your image loading into a xhr request to begin with and then use base64 data to output or something.