Замена сломанных картинок на сайте средствами JS

Картинка может "сломаться" из-за переноса файлов или папок на хостинге, либо, если изображение находится на стороннем ресурсе  - его удаления, переноса и любой другой причины.

Давайте рассмотрим пример как поставить заглушку из другого изображения на данный случай

Для начала необходимо написать функцию-обработчик события onError, которое возникает при ошибке изображения

function imgError(image) {
    image.onerror = "";
    image.src = "/images/noimage.gif";
    return true;
}

Вместо /images/noimage.gif - напишите ваш путь к картинке, которая будет выводиться в том случае, если оригинальная картинка указанная в src не будет найдена.

Теперь необходимо вызвать наш обработчик в теге img

<img src="image.png" onerror="imgError(this);"/>

Есть еще один вариант использования данной функции, он немного облегчает написание данной функции

<img src="image.png" onError="this.onerror=null;this.src='/images/noimage.gif';" />

В данном случае весь код функции-обработчика вставлен в тег IMG 

Смотрите также

10 Лучших CSS сниппетов
100 качественных реалистичных мокапов
Замена капчи eForm на Google reCAPTCHA

Группа Вконтакте