Jquery image load error

How to check if an image is loaded with jQuery By mkyong | Last updated: August 30, 2012 Viewed: 117,725 (+33 pv/w) To check if an image is loaded successful or not, you can combine the use of jQuery ‘load()‘ and ‘error()‘ event : If the image is loaded successful, the load() function is […]

Содержание

  1. How to check if an image is loaded with jQuery
  2. Try it yourself
  3. Comments
  4. Проверьте, загружено ли изображение (без ошибок) с помощью jQuery
  5. Особенности:
  6. Ресурсы
  7. Проверьте, загружено ли изображение (без ошибок) в JavaScript
  8. 14 ответов
  9. характеристики:
  10. ресурсы

How to check if an image is loaded with jQuery

By mkyong | Last updated: August 30, 2012

Viewed: 117,725 (+33 pv/w)

To check if an image is loaded successful or not, you can combine the use of jQuery ‘load()‘ and ‘error()‘ event :

If the image is loaded successful, the load() function is called, otherwise the error() function is called.

Try it yourself

mkyong

Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

$ ( window ). on ( ‘load’ , function () <
console . log ( ‘doc loaded’ );
$ ( ‘img’ ). each ( function () <
$ ( ‘.item’ ). css ( ‘background’ , ‘#000’ );
$ ( this ). animate (< ‘opacity’ : ‘1’ >, 4000 );
imageLoaded ( $ ( this ), 0 );
>);
>);
function imageLoaded ( element , size ) <
var filterVal = ‘blur(‘ + size + ‘px)’ ;
$ ( element ). css ( <
‘filter’ :filterVal ,
‘webkitFilter’ :filterVal ,
‘mozFilter’ :filterVal ,
‘oFilter’ :filterVal ,
‘msFilter’ :filterVal ,
‘transition’ : ‘all 0.3s’ ,
‘-webkit-transition’ : ‘all 0.3s’ ,
‘-moz-transition’ : ‘all 0.3s’ ,
‘-o-transition’ : ‘all 0.3s’ ,
‘opacity’ : 1
>);
>

not working with each to blur to 0… all run at same time… i want each to appear one by one and blur to 0.. initially image are blur and opacity 0

1. Although the “Try Demo” link works as stated (new window opens with URL http://www.mkyong.com/wp-content/uploads/jQuery/jQuery-check-if-image-loaded.html and displays correct results), we noted the span area outlined in red is shrunken and does not appear to contain the load status messages when under the following two circumstances: Save the code locally as test.html via “view source” from the new window that displays after clicking “Try Demo”. Cut/paste code listed under “Try it yourself” into a local file test.html. We note this happens in firefox 10.0.6 and IE 7.0.6022.18005 (these are installed by our IT dept on our pc’s and workstations).

2. Why won’t alert statements added in the code (example below) fire despite the image being loaded?? We believe your answer will help us better understand how this method is being executed.

$(‘#image1’)
.load(function() <
alert(“here”);
$(‘#result1’).text(‘Image is loaded!’);
alert(“here2”);
>);

Источник

Проверьте, загружено ли изображение (без ошибок) с помощью jQuery

Я использую JavaScript с библиотекой jQuery для управления миниатюрами изображений, содержащимися в неупорядоченном списке. Когда изображение загружается, оно делает одно, а при возникновении ошибки — другое. Я использую jQuery load() и error() методы в качестве событий. После этих событий я проверяю DOM-элемент image на наличие .complete, чтобы убедиться, что изображение еще не загружено, прежде чем jQuery сможет зарегистрировать события.

Он работает правильно, за исключением случаев, когда возникает ошибка, прежде чем jQuery сможет зарегистрировать события. Единственное решение, которое я могу придумать, — это использовать onerror атрибут img для хранения «флага» где-то на глобальном уровне (или на самом узле), который говорит, что произошел сбой, поэтому jQuery может проверить этот «store / node» при проверке .complete.

У кого-нибудь есть лучшее решение?

Редактировать: Основные точки выделены жирным шрифтом и добавлены дополнительные подробности ниже: Я проверяю, завершено ли изображение (оно также загружено) ПОСЛЕ того, как я добавляю на изображение событие загрузки и ошибки. Таким образом, если изображение было загружено до регистрации событий, я все равно буду знать. Если изображение не загружается после событий, события позаботятся об этом, когда это произойдет. Проблема в том, что я могу легко проверить, загружено ли изображение, но не могу сказать, произошла ли ошибка.

Другим вариантом является запуск событий onload и / или onerror событий путем создания элемента изображения в памяти и установки его src атрибута в качестве исходного src атрибута исходного изображения. Вот пример того, что я имею в виду:

Надеюсь это поможет!

Проверьте complete и naturalWidth свойства, в этом порядке.

Основываясь на моем понимании в HTML спецификации W3C для img элемента , вы должны быть в состоянии сделать это , используя комбинацию complete и naturalHeight атрибутов, например , так:

Из спецификации для complete атрибута:

Атрибут IDL complete должен возвращать true, если выполняется любое из следующих условий:

  • Атрибут src опущен.
  • Последняя задача, поставленная в очередь источником сетевых задач после извлечения ресурса, была поставлена ​​в очередь.
  • Элемент img полностью доступен.
  • Элемент img не работает.

В противном случае атрибут должен возвращать false.

По сути, complete возвращает true, если изображение либо завершило загрузку, либо не удалось загрузить. Поскольку нам нужен только тот случай, когда изображение успешно загружено, нам нужно также проверить nauturalHeight атрибут:

Атрибуты IDL naturalWidth и naturalHeight должны возвращать собственную ширину и высоту изображения в пикселях CSS, если изображение доступно, иначе 0.

И available определяется так:

Img всегда находится в одном из следующих состояний:

  • Недоступно — пользовательский агент не получил никаких данных изображения.
  • Частично доступно — пользовательский агент получил некоторые данные изображения.
  • Полностью доступно — Пользовательский агент получил все данные изображения, и, по крайней мере, доступны размеры изображения.
  • Сломан — пользовательский агент получил все данные изображения, которые он может, но он даже не может декодировать изображение настолько, чтобы получить размеры изображения (например, изображение повреждено, или формат не поддерживается, или данные не могут быть получены) ,

Когда элемент img находится либо в частично доступном состоянии, либо в полностью доступном состоянии, он считается доступным.

Поэтому, если изображение «повреждено» (не удалось загрузить), оно будет в поврежденном состоянии, а не в доступном состоянии, поэтому naturalHeight будет 0.

Поэтому проверка imgElement.complete && imgElement.naturalHeight !== 0 должна сообщить нам, успешно ли загружено изображение.

Подробнее об этом можно прочитать в HTML-спецификации W3C для img элемента или в MDN .

Я пробовал много разных способов, и этот способ — единственный, который работал для меня

Вы также можете добавить функцию обратного вызова, сработавшую, когда все изображения загружены в DOM и готовы. Это относится и к динамически добавляемым изображениям. http://jsfiddle.net/kalmarsh80/nrAPk/

Используется с простым Javascript и как плагин jQuery.

Особенности:

  • официально поддерживается IE8 +
  • лицензия: MIT
  • зависимости: нет
  • вес (минимизированный и сжатый): 7 КБ минимизированный (легкий!)

Ресурсы

  • Проект на github: https://github.com/desandro/imagesloaded
  • Официальный сайт: http://imagesloaded.desandro.com/
  • /programming/26927575/why-use-imagesloaded-javascript-library-versus-jquerys-window-load
  • библиотека загруженного изображения: какая поддержка браузера и устройства?

Получить информацию из элементов изображения на странице.
Тестирование работы в Chrome и Firefox.
Работа с jsFiddle (откройте консоль, чтобы увидеть результат)

Примечание: я использовал jQuery , я думал, что это может быть достигнуто на полном JavaScript

Я нахожу хорошую информацию здесь OpenClassRoom -> это французский форум

Детектор сети в реальном времени — проверьте состояние сети, не обновляя страницу: (это не jquery, но протестировано и работает на 100%: (протестировано на Firefox v25.0))

Код:

если соединение потеряно, просто нажмите кнопку «Снова».

Обновление 1: автоопределение без обновления страницы:

Прочитав интересные решения на этой странице, я создал простое в использовании решение, на которое сильно повлияли заметки SLaks и Noyo, которые, кажется, работают над довольно свежими (на момент написания) версиями Chrome, IE, Firefox, Safari и Опера (все на Windows). Кроме того, он работал на эмуляторе iPhone / iPad, который я использовал.

Одно из основных различий между этим решением и SLaks и публикацией Noyo заключается в том, что это решение в основном проверяет свойства naturalWidth и naturalHeight. Я обнаружил, что в текущих версиях браузера эти два свойства обеспечивают наиболее полезные и согласованные результаты.

Этот код возвращает TRUE, когда изображение полностью загружено и успешно. Он возвращает FALSE, когда изображение либо не загружено полностью, либо ИЛИ не удалось загрузить.

Одна вещь, о которой вам нужно знать, это то, что эта функция также возвращает FALSE, если изображение является пиксельным изображением 0x0. Но эти изображения довольно необычны, и я не могу вспомнить очень полезного случая, когда вы хотели бы проверить, загрузилось ли уже изображение с пикселем 0x0 🙂

Сначала мы прикрепляем новую функцию isLoaded к прототипу HTMLImageElement, чтобы эту функцию можно было использовать с любым элементом изображения.

Затем, в любое время, когда нам нужно проверить состояние загрузки изображения, мы просто вызываем функцию isLoaded.

Согласно комментариям Джорджа о записи SLaks и Noyo, это решение, вероятно, можно использовать в качестве одноразовой проверки в Safari Mobile, если вы планируете изменить атрибут SRC. Но вы можете обойти это, создав элемент изображения с новым атрибутом SRC вместо изменения атрибута SRC в существующем элементе изображения.

Источник

Проверьте, загружено ли изображение (без ошибок) в JavaScript

Я использую JavaScript с библиотекой jQuery для управления эскизами изображений, содержащимися в неупорядоченном списке. Когда изображение загружается, оно делает одно, когда возникает ошибка, оно делает что-то еще. Я использую методы jQuery load() и error() в качестве событий. после этих событий я проверяю элемент image DOM для .завершите, чтобы убедиться, что изображение еще не загружено, прежде чем jQuery сможет зарегистрировать события.

Он работает правильно, за исключением, когда ошибка возникает перед jQuery может регистрировать события. единственное решение, которое я могу придумать, — это использовать атрибут img onerror для хранения «флага» где-то глобально (или на узле он сам), который говорит, что он не удался, поэтому jQuery может проверить, что «store/node» при проверке .полный.

У кого-нибудь есть лучшее решение?

Edit: выделены жирным шрифтом основные моменты и добавлена дополнительная информация ниже: Я проверяю, завершено ли изображение (ака загружено) после добавления события load и error на изображение. Вот кстати, если изображение было загружено до регистрации событий, я все равно буду знать. Если изображение не загружается после событий, то события позаботятся об этом, когда это произойдет. Проблема в том, что я могу легко проверить, загружено ли изображение уже, но я не могу сказать, произошла ли ошибка вместо этого.

14 ответов

другой вариант-вызвать onload и/или onerror события, создав в памяти элемент изображения и установив его src атрибут к оригиналу src атрибут исходного изображения. Вот пример того, что я имею в виду:

надеюсь, что это помогает!

Регистрация complete и naturalWidth свойства, в таком порядке.

основываясь на моем понимании спецификация HTML W3C для img элемент, вы должны быть в состоянии сделать это, используя комбинацию complete и naturalHeight атрибуты, например, так:

из спецификации для complete :

атрибут IDL complete должен возвращать true, если любое из следующих значений условий:

  • src атрибут опущен.
  • конечная задача, поставленная в очередь источником сетевой задачи после извлечения ресурса, поставлена в очередь.
  • элемент img полностью доступен.
  • элемент img сломан.

в противном случае атрибут должен возвращать false.

таким образом, complete возвращает true, если изображение или загрузка, или не удалось загрузить. Так как нам нужен только тот случай, когда изображение успешно загружено, нам нужно проверить nauturalHeight а также:

атрибуты IDL naturalWidth и naturalHeight должны вернуть внутренняя ширина и высота изображения в CSS-пикселях, если изображение доступно, либо 0.

и available определяется следующим образом:

img всегда находится в одном из следующих состояний:

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

когда элемент img находится либо в частично доступном состоянии, либо в полностью доступное состояние, говорят, что оно доступно.

поэтому, если изображение «сломано» (не удалось загрузить), то оно будет в сломанном состоянии, а не в доступном состоянии, поэтому naturalHeight будет 0.

поэтому проверка imgElement.complete && imgElement.naturalHeight !== 0 должен сообщить нам, успешно ли загружено изображение.

вы можете узнать больше об этом в спецификация HTML W3C для img элемент или на MDN.

Я пробовал много разных способов и этот способ-это только один работал для меня

вы также можете добавить функцию обратного вызова, запущенную после загрузки всех изображений в DOM и готовности. Это относится и к динамически добавляемым изображениям. http://jsfiddle.net/kalmarsh80/nrAPk/

используется с простым Javascript и в качестве плагина jQuery.

характеристики:

  • официально поддерживается IE8+
  • лицензия: MIT
  • зависимости: нет
  • вес (minified & gzipped): 7kb minified (свет!)

ресурсы

  • проект на github: https://github.com/desandro/imagesloaded
  • официальный сайт: http://imagesloaded.desandro.com/
  • https://stackoverflow.com/questions/26927575/why-use-imagesloaded-javascript-library-versus-jquerys-window-load
  • imagesloaded javascript library: что такое поддержка браузера и устройства?

сетевой детектор в реальном времени-проверьте состояние сети без обновления страницы: (это не jquery, но протестировано, и 100% работает: (протестировано на Firefox v25.0))

код:

Если соединение потеряно, просто нажмите кнопку снова.

обновление 1: Автоматическое обнаружение без обновления страницы:

извлечение информации из элементов изображения на странице
Тест работает на Chrome и Firefox
Работа jsFiddle (открыть консоль, чтобы увидеть результат)

Примечание : я использовал jQuery, Я думал, что это может быть достигнуто на полном javascript

Я нахожу хорошую информацию здесь OpenClassRoom —> это французский форум

вот как я заставил его работать в кросс-браузере, используя комбинацию методов выше (мне также нужно было динамически вставлять изображения в dom):

Примечание: вам нужно будет указать допустимое логическое состояние для переменной isIE.

прочитав интересные решения на этой странице, Я создал простое в использовании решение, на которое сильно повлияло сообщение SLaks и Noyo, которое, похоже, работает над довольно последними версиями (на момент написания) Chrome, IE, Firefox, Safari и Opera (все на Windows). Кроме того, он работал на эмуляторе iPhone/iPad, который я использовал.

одно главное различие между этим решением и SLaks и сообщением Noyo заключается в том, что это решение в основном проверяет свойства naturalWidth и naturalHeight. Я установлено, что в текущих версиях браузера эти два свойства обеспечивают наиболее полезные и согласованные результаты.

этот код возвращает TRUE, когда изображение загружено полностью и успешно. Он возвращает FALSE, если изображение еще не загружено полностью или не удалось загрузить.

одна вещь, которую вам нужно будет знать, — это то, что эта функция также вернет FALSE, если изображение является 0x0 пиксельным изображением. Но эти образы весьма редки, и я не могу придумать полезный случай, когда вы хотите проверить, загружено ли изображение 0x0 пикселей:)

Сначала мы прикрепляем новую функцию под названием «isLoaded» к прототипу HTMLImageElement, чтобы функцию можно было использовать на любом элементе изображения.

затем, в любое время нужно проверить состояние загрузки изображения, мы просто вызываем функцию «загрузить».

за комментарий giorgian на Слакс и Noyo, это решение, вероятно, может быть использован только в качестве разовая проверка на Safari Mobile, если вы планируете изменить атрибут SRC. Но вы можете обойти это, создав элемент изображения с новым атрибутом SRC вместо изменения атрибута SRC на существующем элементе изображения.

Как я понимаю .полная собственность нестандартна. Она может быть не универсальной. Я замечаю, что в Firefox verses IE это работает по-другому. Я загружаю несколько изображений в javascript, а затем проверяю, завершено ли. В Firefox это, кажется, отлично работает. В IE это не так, потому что изображения, похоже, загружаются в другой поток. Он работает, только если я помещаю задержку между моим назначением на image.src и когда я проверяю изображение.полная собственность.

использование изображения.onload и изображение.onerror также не работает для меня, потому что мне нужно передать параметр, чтобы узнать, о каком изображении я говорю, когда вызывается функция. Любой способ сделать это, кажется, терпит неудачу, потому что на самом деле он передает одну и ту же функцию, а не разные экземпляры одной и той же функции. Поэтому значение, которое я передаю в него для идентификации изображения, всегда оказывается последним значением в цикле. Я не могу придумать, как обойти эту проблему.

на Safari и Chrome, я вижу изображение.завершите true и naturalWidth, даже если консоль ошибок показывает 404 для этого изображения. и я намеренно удалил это изображение, чтобы проверить это. Но вышеизложенное хорошо работает для Firefox и IE.

Источник

Источник

Нередко бывает, что при загрузке веб-страницы какие-то изображения оказываются недоступны, и браузер услужливо рисует на их месте пустые контуры. В этой статье я расскажу, как обработать ошибки загрузки изображений и подставить вместо них другое изображение.

Допустим, у нас на сервере лежит файл: https://svgshare.com/i/7ck.svg

Рассмотрим следующий пример. Сколько изображений будет показано?

<html>
  <head>
    <meta charset="utf-8" content="text/html; charset=utf-8"/>
    <style>
      html, body {
        height: 100px;
        width: auto;
      }
    </style>
  </head>

  <body>
    <div class="achievement-image">
      <img src="https://svgshare.com/i/7ck.svg">
      <img src="//svgshare.com/i/7ck.svg">
      <img src="svgshare.com/i/7ck.svg">
      <img src="7ck.svg">
    </div>
  </body>
</html>

Одно, максимум два.

Ответ зависит от того, как открыть этот код. Если разместить его на сервере, вроде https://myserver.com, мы увидим первые два изображения. Если же сохранить его локально и открыть в браузере html файл — только одно. Для ясности я покажу, во что превращаются ссылки из атрибута src в обоих случаях.

В случае сервера https://myserver.com имеем:

https://svgshare.com/i/7ck.svg
https://svgshare.com/i/7ck.svg
https://myserver.com/svgshare.com/i/7ck.svg
https://myserver.com/7ck.svg

В случае локального файла из file:///home/leksa/html/example.html имеем:

https://svgshare.com/i/7ck.svg
file://svgshare.com/i/7ck.svg
file:///home/leksa/html/svgshare.com/i/7ck.svg
file:///home/leksa/html/7ck.svg

Для отслеживания и реакции на успешную или неуспешную загрузку изображения HTML предлагает нам два события, доступных для тега img: onload и onerror. Как следует из названия, первое событие возникает, когда изображение было загружено, а второе, когда что-то пошло не так.

Модифицируем наш код и проверим работу этих событий в консоли браузера.

<div class="achievement-image">
  <img src="https://svgshare.com/i/7ck.svg" 
       onload="console.log('load 1')" onerror="console.log('error 1')">
  <img src="//svgshare.com/i/7ck.svg"
       onload="console.log('load 2')" onerror="console.log('error 2')">
  <img src="svgshare.com/i/7ck.svg"
       onload="console.log('load 3')" onerror="console.log('error 3')">
  <img src="7ck.svg"
       onload="console.log('load 4')" onerror="console.log('error 4')">
</div>

Как и ожидалось, последние три изображения спровоцировали событие onerror. Назначим на него свой обработчик (потребуется подключить библиотеку JQuery) и подменим атрибут src на адрес желаемого изображения.

$(document).ready(function() {
  $(".image-container img").each(function(key, item) {
    $(item).on("error", function() {
      showDefaultImage(this);
    }).attr('src', $(item).attr('src'));
  });
});

function showDefaultImage(img) {
  $(img).attr('src', 'https://svgshare.com/i/7bo.svg');
  $(img).off("error");
}

В интернете есть много примеров решения данной задачи, однако есть один важный момент, о котором часто забывают. Хочу обратить ваше внимание на вызов

$(item).on(...).attr('src', $(item).attr('src'))

после назначения обработчика. Атрибут src устанавливается в то же значение, в котором он изначально был. Зачем это нужно?

Для ответа на этот вопрос вернёмся к последовательности возникновения событий.

  • Событие DOMContentLoaded возникает, когда построено дерево DOM, а также загружены и выполнены все скрипты. При этом внешние ресурсы, включая изображения и стили, могут быть ещё не загружены.
  • Событие load объекта window возникает, когда страница со всеми ресурсами была загружена.
  • Событие ready специфично для JQuery, согласно документации, оно аналогично событию DOMContentLoaded, то есть не дожидается загрузки мультимедийного контента.

Откроем код, приведённый ниже, и посмотрим на вывод в консоли браузера.

<html>
  <head>
    <meta charset="utf-8" content="text/html; charset=utf-8"/>

    <style>
      html, body {
        height: 100px;
        width: auto;
      }
    </style>

    <script>
      $(document).on("DOMContentLoaded", function() {
        console.log("document loaded");
      });
      $(window).on("load", function() {
        console.log("content loaded");
      });
      $(document).ready(function() {
        console.log(“JQuery ready”);
      });
    </script>
  </head>

  <body>
    <div class="image-container">
      <img src="https://svgshare.com/i/7ck.svg" 
           onload="console.log('load 1')" onerror="console.log('error 1')">
      <img src="//svgshare.com/i/7ck.svg"
           onload="console.log('load 2')" onerror="console.log('error 2')">
      <img src="svgshare.com/i/7ck.svg"
           onload="console.log('load 3')" onerror="console.log('error 3')">
      <img src="7ck.svg"
           onload="console.log('load 4')" onerror="console.log('error 4')">
    </div>
  </body>
</html>


 

Тут есть кое-что интересное. Вопреки ожиданием, событие ready срабатывает после загрузки всего контента (включая изображения), аналогично событию load. А значит, на момент создания обработчиков, события error и load уже произошли, и обработчики никогда не будут вызваны.

В браузере firefox картина примерно такая же.

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

Окончательный вариант кода приведён ниже (живой пример).
 

<html>
  <head>
    <meta charset="utf-8" content="text/html; charset=utf-8"/>

    <style>
      html, body {
        height: 100px;
        width: auto;
      }
    </style>

    <script>
      // $(document).on("DOMContentLoaded", function() {
      $(document).ready(function() {
        $(".image-container img").each(function(key, item) {
          $(item).on("error", function() {
            showDefaultImage(this);
          }).attr('src', $(item).attr('src'));
        });
      });

      function showDefaultImage(img) {
        $(img).attr('src', 'https://svgshare.com/i/7bo.svg');
        $(img).off("error");
      }
    </script>
  </head>

  <body>
    <div class="image-container">
      <img src="https://svgshare.com/i/7ck.svg">
      <img src="//svgshare.com/i/7ck.svg">
      <img src="svgshare.com/i/7ck.svg">
      <img src="7ck.svg">
    </div>
  </body>
</html>

Источник

If you develop and push to production, you most likely have experienced broken images on your dev instance. You may have also run into broken images on production due to user/admin error, etc. Wouldn’t it be nice if you could display a default placeholder image without having to take a hit on your file system, checking to see if it exists, before your load each image?

Thanks to Ryan Stille’s recent blog post, I have been made aware of a (not so great) solution. Apparently the img tag, along with others such as object, script and style have error events. We can listen for the error event and load a placeholder image in place of the default browser error image.

The catch is the event handler must be attached before the browser fires the error event. Also, the error event may not be correctly fired when the page is served locally. The error event relies on HTTP status codes and will generally not be triggered if the URL uses the “file:” protocol.

In simpler terms, the only solution I’ve found is to either place the event handler inline with the img tag, assign the img src via JavaScript or recursively search each image’s complete state or naturalWidth once the window is done loading. I’ve tried using “$().on()” and “$(“img”).error()” both after the document loads and inline before the element is loaded. However neither solution works, which doesn’t make much sense to me.

I am including multiple examples because this is not a one-solution-fits-all scenario.

The first working example displays a placeholder image using the inline method if the error event is thrown. Notice the onerror handler is reset when it’s run so you don’t run into an infinite loop if your placeholder image also fails.

<img src="images/myImage.jpg" alt="My Image" onerror="imageError(this)">

<script>
function imageError(element) {
    element.onerror='';
    element.src='/images/imgPlaceholder.png';
}
</script>

The second working example, also using the inline method, will call a script that will report the broken image and load the placeholder. The script returns an image with the proper image MIME type.

<img src="images/myImage.jpg" alt="My Image" onerror="imageError(this)">

<script>
function imageError(element) {
    element.onerror='';
    element.src='logBrokenImage.cfm?image=' + element.src';
}
</script>

The third working example uses JavaScript to load the image and displays a placeholder if that image fails to load.

<img id="myImage">

<script>
    $('img').one( 'error', function() {
        $(this).attr( 'src', '/images/imgPlaceholder.png' );
    });

    $('#myImage').attr( 'src', 'myImage.jpg' );
</script>

The final working example recursively searches through each image after the window loads. If it finds the state incomplete or the natural width of the image is 0, then it loads the placeholder image.

<img src="images/myImage.jpg" alt="My Image">

<script>
$(window).load(function() {
    $('img').each(function() {
        if ( !this.complete || ( !$.browser.msie && ( typeof this.naturalWidth == "undefined" || this.naturalWidth == 0 ) ) ) {
            this.src = '/images/imgPlaceholder.png';
        }
    });
});
</script>

#error, #event, #handler, #img, #javascript, #jquery, #src

Источник

Понравилась статья? Поделить с друзьями:
  • Jquery get fail error
  • Jquery get error message
  • Jquery event error
  • Jquery error is not a function
  • Jquery ajax success error