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

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> тега. А если судить по сетевой активности, похоже, если вы попытаетесь создать новое изображение, используя URL-адрес изображения что только 404-е место на той же странице, запрос действительно отправляется второй раз. Часть причины неудачи сервера изображений - это, по крайней мере, частично наш трафик, поэтому я действительно должен делать все, что в моих силах, чтобы поддерживать запросы вниз или проблема будет только ухудшаться.

Вопрос, о котором идет речь в комментарии @ danp к моему вопросу, на самом деле был для меня ответом, хотя это был не принятый ответ. Я могу подтвердить, что он работает с IE 7 & 8, FF и веб-браузерами. Я сомневаюсь, что он будет работать со старыми браузерами, поэтому у меня есть 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

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

Answer 4

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

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

Я тестировал нижеследующее в 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); 
    } 
});​ 

Live example