Как молча скрыть значок "изображение не найдено", когда исходное изображение src не найдено

Question

Как молча скрыть значок "изображение не найдено", когда исходное изображение src не найдено

вы знаете, как скрыть классический "изображение не найдено" значок с отображаемой HTML-страницы, когда файл изображения не найден?

любой метод работы с использованием JavaScript/jQuery / CSS?

527 7

jQuery javascript html css image

7 ответов:

Comments

Ничего не найдено.

Andy E · Accepted Answer · 2010-07-13 13:23:05

можно использовать onerror событие в JavaScript, чтобы действовать, когда изображение не загружается:
var img = document.getElementById("myImg");
img.onerror = function () { 
    this.style.display = "none";
}
в jQuery (так как вы спросили):
$("#myImg").error(function () { 
    $(this).hide(); 
});
или для всех изображений:
$("img").error(function () { 
    $(this).hide();
    // or $(this).css({visibility:"hidden"}); 
});
вы должны использовать visibility: hidden вместо .hide() если скрытие изображений может изменить макет. Многие сайты в интернете используют изображение по умолчанию "no image" вместо этого, указывая src атрибут к этому изображению, когда указанное местоположение изображения недоступно.

Gary Willoughby · Accepted Answer · 2010-07-13 13:12:58

<img onerror='this.style.display = "none"'>

105

2010-07-13 13:12:58

jAndy · Accepted Answer · 2010-07-13 13:20:33

делаем быстрое исследование на Энди Е ответ, его невозможно live() связать error.
// won't work (chrome 5)
$('img').live('error', function(){
     $(this).css('visibility', 'hidden');
});
так что вы должны пойти, как
$('<img/>', {
  src:    'http://www.notarget.com/fake.jpg',
  error:  function(e){
    $(this).css('visibility', 'hidden');
  }
}).appendTo(document.body);
напрямую связывать error event handler при создании нового элемента.

Adway Lele · Accepted Answer · 2012-09-15 00:39:16

Это может быть немного поздно для ответа, но вот моя попытка. Когда я столкнулся с той же проблемой, я исправил ее с помощью div размера изображения и настройки фонового изображения для этого div. Если изображение не найдено, div визуализируется прозрачным, поэтому все это делается молча без кода java-скрипта.

Q_Mlilo · Accepted Answer · 2014-08-26 04:07:28

чтобы скрыть каждую ошибку изображения, просто добавьте этот JavaScript в нижней части страницы (непосредственно перед закрытием тега body):
(function() {
    var allimgs = document.images;
    for (var i = 0; i < allimgs.length; i++) {
        allimgs[i].onerror = function() {
            this.style.visibility = "hidden"; // Other elements aren't affected. 
        }
    }
})();

Sash · Accepted Answer · 2017-01-11 11:16:39

Я немного изменил решение, предложенное Гэри Уиллоуби, потому что он кратко показывает сломанное изображение. Мое решение:
    <img src="..." style="display: none" onload="this.style.display=''">
в моем решении изображение скрыто изначально и отображается только тогда, когда оно успешно загружено. Он имеет недостаток: пользователи не будут видеть наполовину загруженные изображения. И если пользователь отключил JS, то он никогда не увидит никаких изображений

Jacek Głodek · Accepted Answer · 2015-10-15 17:15:33

Я нашел отличный метод, чтобы сделать именно это, будучи все еще функциональным при использовании ng-src указание на угловой.js и тому подобное...
<img
  ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}" 
  onerror="this.src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='"
  />
это в основном самый короткий прозрачный GIF (как видно http://proger.i-forge.net/%D0%9A%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82%D0%B5%D1%80/[20121112]%20The%20smallest%20transparent%20pixel.html)

конечно, этот gif может храниться внутри некоторой глобальной переменной, поэтому он не испортит шаблоны.
<script>
  window.fallbackGif = "..."
</script>
и использовать
<img
  ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}" 
  onerror="this.src=fallbackGif"
  />
etc.