Как тихо скрыть значок “Image not found”, когда src исходное изображение не найдено
Вы знаете, как скрыть классический "Image not found" значок от представленной страницы HTML, когда файл изображения не найден?
Какой-либо метод работы с помощью JavaScript/jQuery/CSS?
4 ответа
Вы можете использовать событие 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(), если скрытие изображений может изменить макет. Многие сайты в Интернете используют по умолчанию изображение "без изображения", указывая атрибут src на это изображение, когда указанное местоположение изображения недоступно.
Чтобы скрыть каждую ошибку изображения, просто добавьте этот код JavaScript внизу страницы (непосредственно перед закрывающим тегом тела):
(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.
}
}
})();
Проведя быстрое исследование ответа Энди Э , невозможно live () связать ошибку .
// 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);
напрямую связать обработчик событий ошибки при создании нового элемента.