Обнаружение изображения 404 в JavaScript

После того, как пользователь загружает файл, мы должны сделать некоторую дополнительную обработку с изображениями, такими как изменение размеров и загрузить на S3. Это может занять до 10 дополнительных секунд. Очевидно, мы делаем это в фоне. Однако мы хотим показать пользователю страницу результатов сразу и просто показать счетчики на месте, пока изображения не прибывают в свой постоянный дом на s3.

Я ищу способ обнаружить, что определенному изображению не удалось загрузиться правильно (404) в перекрестном браузере путь. Если это происходит, мы хотим использовать JS для показа счетчика в, он - место, и перезагрузите изображение каждые несколько секунд, пока он не может быть успешно загружен из s3.

52
задан Brian Tompsett - 汤莱恩 19 September 2019 в 07:32
поделиться

2 ответа

От: 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;
}

И вот как его использовать:

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'
});
10
ответ дан 7 November 2019 в 09:23
поделиться

Обработка события onerror элемента .

52
ответ дан 7 November 2019 в 09:23
поделиться
Другие вопросы по тегам:

Похожие вопросы: