Хотите скрыть изображение, когда изображение не найдено в местоположении src?

Question

jQuery('img').bind('error',function(){
            alert('hi');
        jQuery(this).hide(); 
        });

Я написал этот код, но недоступные изображения не прячутся и все еще показывают крестик.Кто-нибудь может указать, что может быть не так.Я пишу это под document.ready и я попробовал это и под window.onload.

Answer 1

Кажется, проблема в том, что к тому времени, когда вы связываете событие ошибки, ошибка изображения уже сработала. Вы можете запустить его снова, сбросив img.src после привязки события. Следующее работало в IE8, FF и Chrome.

$('img').error(function(){
    alert('hi');
    $(this).hide(); 
});

$('img').each(function() { this.src = this.src; });

jsFiddle здесь: http://jsfiddle.net/7cnQN/

Answer 2

Проверено в FF, IE, Chrome, Safari, Opera.

$('img').each(function() {
    var img = this;
    if (img.complete) {
        if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) {
            console.log(img, 'load failed');
        } else {
            console.log(img, 'load ok');
        }
    } else if (img.readyState == 'uninitialized') {
        console.log('load failed - IE');
    } else {
        $(img).error(function() { console.log(img, 'load failed - error()'); });
        $(img).ready(function() { console.log(img, 'load ok - onload()'); });
    }
});

Answer 3

Вы имеете дело с состоянием гонки. jQuery может или не может быть загружен, когда изображение загружается. Следующий код обрабатывает оба случая.

$('img').each(function() {
    var img = this;
    if (img.complete) {
        if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) {
            console.log(img, 'load failed');
        } else {
            console.log(img, 'load ok');
        }
    } else {
        $(img).error(function() { console.log(img, 'load failed - error()'); });
        $(img).ready(function() { console.log(img, 'load ok - onload()'); });
    }
});

Answer 4

Возможно, вы захотите попробовать другую тактику и вместо этого показывать изображения при загрузке:

jQuery('img').each(function(i,img){
    jQuery('img').bind('load',function(){ this.show(); });
    if (img.complete)
        jQuery(img).show();
});

Сначала свяжитесь с событием, затем проверьте, загрузилось ли изображение (.complete) ипокажи это.Это потребует от вас скрытия всех изображений заранее с помощью сценария или в рамках встроенного стиля отдельных изображений.Используя известный контейнер в качестве области видимости ...

jQuery('#container img')

... вы можете ограничить это поведение подмножеством изображений.

Answer 5

Пример в документах .error() показывает это:

$("img").error(function(){
  $(this).hide();
});

... что по сути совпадает с тем, что вы делаете.Можете ли вы проверить, что jQuery загружен и доступен на странице?Кроме того, если вы используете FireFox, Chrome или Safari, попробуйте проверить консоль javascript на наличие ошибок.

РЕДАКТИРОВАТЬ: Обратите внимание, это также из документов:

Это событие может небыть правильно запущенным, когда страница обслуживается локально.Поскольку ошибка зависит от обычных кодов состояния HTTP, она обычно не будет запускаться, если URL-адрес использует файл: protocol.

Вы тестируете это локально?

Answer 6

У меня лично есть проблемы с JQuery, так как он, кажется, мешает людям изучать собственные возможности JavaScript. Я бы лично использовал событие onerror , например ::

myimage.onerror = function() { this.style.visibility = 'hidden'; }

(не тестировалось)

Answer 7

И на jQuery(document).ready(), и на jQuery(window).onload() в img уже будет ошибка, поэтому вы связываетесь с ошибкой слишком поздно.Попробуйте использовать:

jQuery('img').live('error',function(){
            alert('hi');
        jQuery(this).hide(); 
        });

до jQuery (документ) .ready ();

Я еще не пробовал этот код (и у меня тоже не будет времени) Позвольте мнезнать, если это работает.