Событие image.onError никогда не срабатывает, но изображение не является достоверным - нужна работа

Я пытаюсь добавить изображение на страницу с помощью JavaScript:

image = document.createElement('img');
image.onload = function(){
    document.body.appendChild(image);
}
image.onerror = function(){
    //display error
}
image.src = 'http://example.com/image.png';

Пользователь должен пройти аутентификацию, чтобы увидеть это изображение, а если это не так, я хочу отобразить сообщение об ошибке. К сожалению, сервер не возвращает сообщение об ошибке HTTP, а перенаправляет запрос на (в основном) пустую страницу, поэтому я получаю HTTP 200, но предупреждение Resource interpreted as Image but transferred with MIME type text/html и ничего не отображается.

Как я могу обработать этот случай? У меня нет возможности изменить то, что обслуживает веб-сервер, если пользователь не аутентифицирован.

Ответ 1

В прослушивателе событий image.onload проверьте, являются ли теги image.width и image.height равными нулю (предпочтительно image.naturalWidth и image.naturalHeight, когда они поддерживаются).

Если ширина и высота равны нулю, изображение считается недействительным.

Демо: http://jsfiddle.net/RbNeG/

// Usage:
loadImage('notexist.png');

function loadImage(src) {
    var image = new Image;
    image.onload = function() {
        if ('naturalHeight' in this) {
            if (this.naturalHeight + this.naturalWidth === 0) {
                this.onerror();
                return;
            }
        } else if (this.width + this.height == 0) {
            this.onerror();
            return;
        }
        // At this point, there no error.
        document.body.appendChild(image);
    };
    image.onerror = function() {
        //display error
        document.body.appendChild(
            document.createTextNode('\nError loading as image: ' + this.src)
        );
    };
    image.src = src;
}

Ответ 2

Вот мое решение. Если у меня 404 для моего изображения - я пытаюсь вставить один из моего массива, который составляет 200 OK (Pure Javascript). Изображения должны быть одинаковыми. Иначе - мой func вернет 'no-image.png'. jQuery/JavaScript для замены неработающих изображений