JQuery восстановить IMG SRC в функции .load () - PullRequest
Новая
       33

JQuery восстановить IMG SRC в функции .load ()

2 голосов
/ 04 июня 2011

Я пытаюсь выяснить, как восстановить img src, если путь 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 && $(this).height() == 0 ){
        $(this).attr({src: 'img/missing.jpg'})
               .css({width:'100px', height:'100px'});
     }
 });

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

любая помощь будет принята с благодарностью ...

1 Ответ

3 голосов
/ 04 июня 2011

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

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 отображают ширину и высоту значка «разорванное изображение», которое они показывают: 18x18 пикселей.

...