Проверить существование картинки на jQuery

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

Поломанные картинки можно заменить на какую-нибудь шаблонную, чтобы не рушилась верстка. Чтобы определить загрузилось ли изображение можно воспользоваться событием onload и onerror, которые отслеживают загрузку файлов: скриптов, картинок. Посмотрите пример:

<img src=”picture2.jpg” onload=”alert(‘Файл существует!’);” onerror=”alert(‘Файл не найден’);”/>

Здесь скрипт выведет сообщение в зависимости от того, существует картинка или нет. А в этом примере мы можем скрыть картинку, если ее нет (ну или выполнить любое другое действие):

<img src=”picture.jpg” onerror=”this.style.display=’none'”>

Но прописывать для каждой картинки такие конструкции не удобно, да и не всегда возможно. Более практично использовать each цикл с помощью которого мы на автомате будем заменять не рабочие картинки на шаблонную:

$(document).ready(function(){
$(‘img’).each(function(){
$(this).error(function(){ $(this).attr(‘src’, ‘noimg.png’); });
});
});

Здесь мы сначала перебираем все картинки на сайте, а затем заменяем не рабочие картинки на ту, что назначим по умолчанию noimg.png.

Кстати, если вам нужно определить размер картинки за счет onload, то это можно корректно сделать как в примере ниже. В переменной img мы добавляем селектор картинки по классу myimg:

var img = $(‘.myimg’);
$(img).on(‘load’, function(){ //срабатывает, если картинка загружена
var bjconwidth = Math.round($(img).width());
var bjconheight = Math.round($(img).height());
alert(bjconwidth); alert(bjconheight);
});