Как определить, правильно ли загружено изображение

Question

Есть ли способ узнать после факта, правильно ли изображение (помещенное с тегом <img>, а не через JS) правильно загружено на страницу?У меня есть галерея хэдшотов, и иногда сторонний сервер изображений заканчивает тем, что обслуживает 404. Я могу изменить код на стороне сервера, чтобы использовать onerror="showGenericHeadshot()", но я действительно хочу избежать внесения изменений на стороне серверакод.В конечном счете, я хочу определить, отсутствует ли изображение или сломано, и заменить его на общее изображение «Изображение не найдено».Вещи, которые я пробовал:

1. Image.prototype.onerror = showGenericHeadshot - не работает для <img> тегов
2. $('img[src*=thirdpartyserver.com]).error(showGenericHeadshot) - не работает в IE
3. $('img[src*=thirdpartyserver.com]).css('backgroundImage','url(replacementimage.gif)') - работает, но все еще не избавляется от значка разбитого изображения в IE

Answer 1

К сожалению, я не могу принять ни превосходные ответы @TJ Crowder, ни @ Praveen, хотя оба они выполняют желаемую замену изображения. Ответ @ Правина потребует изменения HTML-кода (в этом случае мне просто нужно подключить собственный атрибут события <img> тега *1001*. И, судя по сетевой активности, похоже, что если вы попытаетесь создать новое изображение, используя URL-адрес изображения, которое только что было отправлено на той же странице, запрос фактически отправляется второй раз. Отчасти причина того, что сервер изображений не работает, - это, по крайней мере, частично, наш трафик, поэтому мне действительно нужно сделать все, чтобы не отвечайте на запросы, иначе проблема только ухудшится ..

Вопрос SO, упомянутый в комментарии @ danp к моему вопросу, на самом деле имел для меня ответ, хотя и не был там принятым ответом. Я могу подтвердить, что он работает с браузерами IE 7 & 8, FF и webkit. Я сомневаюсь, что он будет работать со старыми браузерами, поэтому у меня есть try/catch для обработки любых исключений. В худшем случае замена изображения не происходит, что ничем не отличается от того, что происходит сейчас без каких-либо действий. Я использую реализацию ниже:

$(function() {
    $('img[src*=images.3rdparty.com]').each(
        function() {
            try {
                if (!this.complete || (!$.browser.msie && (typeof this.naturalWidth == "undefined" || this.naturalWidth == 0))) {
                    this.src = 'http://myserver.com/images/no_photo.gif';
                }
            } catch(e) {}
        }
    );
});

Answer 2

<img scr='someUrl' id="testImage" />

jQuery('#testImage').bind('load',function(){
         alert ('iamge loaded');
});

, чтобы избежать состояния гонки, как показано ниже

<img _src="http://www.caregiving.org/intcaregiving/flags/UK.gif" />
// i have added an underscore character before src



jQuery('img').each(function(){
        var _elm=jQuery(this);
        _elm.bind('load',_imageLoaded).attr('src',_elm.attr('_src'))
    });

    function _imageLoaded()
    {
        alert('img loaded');
    }

Answer 3

Я думаю, что у меня есть: когда DOM загружен (или даже на событии window.load - в конце концов, вы хотите сделать это, когда все образы настолько полны, насколько они собираются получить), выможете задним числом проверить, что с изображениями все в порядке, создав один новый элемент img, перехватив его события load и error, а затем переключившись на src с каждого из ваших выстрелов в голову.Что-то вроде кода ниже ( живой пример ).Этот код был просто выделен, это не качество производства - например, вам, вероятно, понадобится тайм-аут, после которого, если вы не получили ни load, ни error, вы допускаете ошибку.(Вам, вероятно, придется заменить свое изображение контролера для надежной обработки.)

Этот метод предполагает, что повторное использование src не не перезагружает изображение, что, я думаю, довольнонадежное предположение (это, безусловно, легко тестируемый один), потому что этот метод использовался для предварительного кэширования изображений навсегда.

Я тестировал нижеприведенное на Chrome, Firefox и Opera для Linux кака также IE6 (да, действительно) и IE8 для Windows.Работал угощение.

jQuery(function($) {
    var imgs, checker, index, start;

    // Obviously, adjust this selector to match just your headshots
    imgs = $('img');

    if (imgs.length > 0) {
        // Create the checker, hide it, and append it
        checker = $("<img>").hide().appendTo(document.body);

        // Hook it up
        checker.load(imageLoaded).error(imageFailed);

        // Start our loop
        index = 0;
        display("Verifying");
        start = now();
        verify();
    }

    function now() {
        return +new Date();
    }

    function verify() {
        if (!imgs || index >= imgs.length) {
            display("Done verifying, total time = " + (now() - start) + "ms");
            checker.remove();
            checker = undefined;
            return;
        }
        checker[0].src = imgs[index].src;
    }

    function imageLoaded() {
        display("Image " + index + " loaded successfully");
        ++index;
        verify();
    }

    function imageFailed() {
        display("Image " + index + " failed");
        ++index;
        verify();
    }

    function display(msg) {
        $("<p>" + now() + ": " + msg + "</p>").appendTo(document.body);
    }
});​

Живой пример

Answer 4

Будет ли достаточно альтернативного текста? Если это так, вы можете использовать атрибут alt тега img.