Если картинки нет, то выводить другую

Ранее я эту задачу решал с помощью PHP: делал проверку наличия файла картинки на диске, если его не оказывалось, то выводил другую картинку — заглушку. Однако, оказалось, есть более простой и очевидный способ.

Старый способ, используя PHP:

// Путь картинки.
$img = datas/img/foto123.jpg

// Если картинки нет или её размер подозрительно маленький.
if(!file_exists($img) || filesize($img) < 512)
{
  // Перезаписываем переменную, путь картинки — заглушки.
  $img = datas/img/none.png
}

Этот вариант не плох, но он дёргает лишний раз диск. Для большого и посещаемого сайта с кучей картинок — это критично.

Новый способ, используем для этой же цели возможности HTML:

<img src="datas/img/foto123.jpg" onError="this.src='datas/img/none.png'">

В итоге получаем аналогичный результат. Работает это быстро, никакой видимой заминки, в случае если картинка не найдена.

Событие onError поддерживают все нормальные веб-браузеры. Есть какие-то проблемы лишь в IE8. Поищите информацию сами, если для вас это актуально.

Для справки, оба противоположных по смыслу события:

  • onLoad — если загрузка успешна.
  • onError — если при загрузке произошла ошибка.

Их можно приспособить для самых разных полезных дел.

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

2 Комментария

  1. Спасибо огромное, очень помогло, но есть такой вопрос, я не программист и не веб-дизайнер, просто пилю интернет-магазин для себя на wordpress, с изображениями товаров всё работает, а с картинкой рубрики не могу разобраться, у меня берется ссылка из описания рубрики, код выглядит так … Как в этом случае мне сделать, чтобы отображалась картинка при отсутствии или недоступности изображения из описания? Спасибо заранее.

    • Не знаю, надо разбираться, надо время. Обратитесь на какой-нибудь специализированный форум. Здесь это даже обсуждать не удобно. Ваш код вставился некорректно (вырезал). Комментарии для этого не предназначены.

Добавить комментарий