→   Замена несуществующей картинки

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

Некоторых людей это очень раздражает, лучше уж пусть в таких случаях браузер отображает заранее заданную картинку.

Например такую:

Для того чтобы это происходило автоматически нужно всего два действия (подключить jQuery и сниппет, где и воспользуемся jQuery методом error):

 

подключаем jQuery ↓
<script type="text/javascript" src="jQuery.js"></script>

 

  1. $(document).ready(function() {
  2.     $('img').error(function() {
  3.         $(this).attr({
  4.         src: 'picture.jpg',
  5.         style:'border:2px solid #ccc;width:150px;height:150px;'
  6.         });
  7.     });
  8. });

Ну и смотрим результат:

Отсутствующее изображение — у этой картинки неправильный адрес: src="netu-takogo-adresa.ru/img.jpg"