Обрабатывать определенный ответ изображения с помощью JavaScript

Question

<img src="/a.jpg" onerror="fetch(\'/a.jpg\')
    .then(code => console.log(code === 499
        ? 'image will be available in a moment'
        : 'image not found'))">

Возможно ли это сделать без запуска двух HTTP-запросов (один с помощью img.src и один с помощью fetch функции)?

Мой пример использования: я хочу запустить цикл опроса (который я уже реализовал, просто пропустил его там для простоты), который попытается загрузить изображение, если оно все еще готовится на сервере (цикл, конечно, будет запускать больше запросов HTTP, но это нормально), но если изображение на самом деле несуществует, просто покажите «изображение не найдено».

Сервер может быть реализован, например, следующим образом:

• , если изображение существует и готов миниатюра, вернуть ответ изображения
• если изображение существует, но миниатюра еще не готова, верните определенный HTTP-код (499)

Для меня достаточно совместимости с современными браузерами и IE 11.

Answer 1

Наконец-то сам нашел решение - загрузить изображение с помощью XHR и отобразить его с помощью BLOB API .

Это решение предоставляет все, что я хотел:

• запускает только один HTTP-запрос для получения {image|error code},
• не требует дополнительных разрешений пользователя (например, реализацияс перехватом webRequest),
• не загрязняет DOM с помощью очень длинных URL-адресов base64,
• кажется совместимым с современными браузерами и даже с IE10.

---

var myImage = document.querySelector('img');

var myRequest = new XMLHttpRequest();
myRequest.open('GET', 'http://placekitten.com/123/456', true);
myRequest.responseType = 'blob';
myRequest.onreadystatechange = () => {
    if (myRequest.readyState !== 4) {
        return;
    }
    if (myRequest.status === 200) {
        var blob = myRequest.response;
        var objectURL = URL.createObjectURL(blob);
        // this is the trick - generates url like 
        // blob:http://localhost/adb50c88-9468-40d9-8b0b-1f6ec8bb5a32
        myImage.src = objectURL;
    } else if (myRequest.status === 499) {
        console.log('... waiting for thumbnail');
        retryAfter5s(); // implementation of retry loop is not important there
    } else {
        console.log('Image not found');
    }
};
myRequest.send();