Блог

Я пытаюсь выяснить, как повторно установить файл src img, если путь к файлу src изображения неверен или изображение не найдено. У меня есть динамически созданный путь к img src, который иногда может указывать на каталог без реальных изображений. В этом случае мне нужно изменить src на img/missing.jpg . Я сделал это безрезультатно:

 $('.imgContainer').append( "<img id='pic' src='/dynamically/created/path/to/img.jpg'>" );
$('.imgContainer img#pic').load(function(){
     if( $(this).width() == 0 amp;amp; $(this).height() == 0 ){
        $(this).attr({src: 'img/missing.jpg'})
               .css({width:'100px', height:'100px'});
     }
 });
  

возможно, есть лучший способ сделать это — но я его не знаю … Я пытался использовать $(this).onerror = //some function , но не смог понять, как заставить это работать.

любая помощь была бы высоко оценена…

Ключ к проблеме заключается в том, что событие ‘load’ запускается только для изображений, когда изображение успешно загружено — поэтому, если вы укажете недопустимый путь, событие load никогда не произойдет. Вместо этого вам нужен обработчик ‘error’, вот так:

 var img = $("<img id='pic' src='/dynamically/created/path/to/img.jpg'>")
 .error(function(){
        $(this).attr({src: 'img/missing.jpg'})
               .css({width:'100px', height:'100px'});
 })
 .appendTo('.imgContainer');
  

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

Кроме того, ваша проверка ширины == 0 и высоты == 0 не будет работать во всех браузерах. Chrome и Safari указывают ширину и высоту значка «поврежденное изображение», который они отображают: 18×18 пикселей.