Время для прочтения: 0 мин. 16 сек.

jQuery сниппеты: обработка «битых» изображений

Проблему отсутствующих изображений или "битых" ссылок на них, когда вместо картинки вы видите крестик (как в IE), достаточно просто решить при помощи JavaScript. Если браузер по каким-то причинам не может найти изображение по ссылке, то возникает событие error, которое очень просто обработать.

Подготовьте в Adobe Photoshop (или любом графическом редакторе) заглушку для «битых» изображений и назначьте для всех картинок в документе обработчик события error. В моем примере я заменяю путь на несуществующую картинку заглушкой. Вы можете обработать данное событие по другому.


// Загрузить картинку об ошибке
$('img').error(function(){
    $(this).attr('src', 'broken-image.png');
});

// Или просто скрыть изображение
$("img").error(function(){
    $(this).hide();
});

Ссылки

Для вставки кода используйте HTML-теги
<pre><code class="php">ваш код</code></pre>

  • vitalsone

    Решение не рабочее!

    • Решение используется на десятках сайтов — везде работает. В чем у вас проблема? Что показывает отладчик ?