Нужна помощь с привязкой jquery .error ()

Question

Мне нужна помощь с некоторыми javascript / jquery, которые я поставил на место. Функция этого скрипта на стороне клиента состоит в том, чтобы установить обработчик событий всех изображений в пределах определенного селектора на странице, и если изображение не загружается (например, не найдено), то оно удаляется. Мой клиентский скрипт выглядит следующим образом: он запускается в document.ready внешнего файла javascript.

$('.imagecontainer').error(function() { ($this).parent().hide(); });

Это работает, иногда! Иногда, когда страница загружается, она работает правильно, больше времени она работает правильно для некоторых изображений, но в большинстве случаев она вообще не работает. Что он делает, если изображение не загружается, тэг окружающего якоря, т.е. родитель изображения скрыт. Я включил оповещения в функцию, чтобы проверить, когда она вызывается, и она срабатывает иногда, но не постоянно.

Так что мне интересно, где я иду не так. Путь / src изображения задается в коде на стороне сервера с помощью C #, поскольку путь получен на стороне сервера и не может быть изменен.

Какие-нибудь советы или идеи по этому поводу? Я где-то читал, что это событие должно быть связано до установки источника изображения, но не уверен, достижимо ли это, поскольку источник изображения установлен на стороне сервера.

Как только я решил эту проблему (надеюсь), у меня возникла другая проблема. Некоторые изображения динамически загружаются действием пользователя и не отображаются на странице во время выполнения. Я справился с этим для 99% событий, используя синтаксис jquery .live ('click', function) и т. Д. Кто-нибудь знает, могу ли я сделать подобное с .error или как я могу его настроить.

Answer 1

Пара вещей на заметку:

Ваш фрагмент содержит синтаксическую ошибку. У вас есть ($this).parent().hide(); вместо $(this).parent().hide();.

Просмотрите документацию .error () . В частности, я заметил две вещи. Во-первых, это наблюдение, что вызов может работать неправильно, если вы работаете локально. Во-вторых, в комментариях кто-то заметил следующее:

Используется обратный вызов onerror. это обратный вызов определен только для тегов img. Некоторые браузеры (IE, FF, ...) поддерживают это обратный вызов на других объектах тоже. Это отлично подходит для отлова глобальных ошибок система (window.onerror). это поведение НЕ соответствует стандартам. WebKit, например, не запускает это Обратный вызов!

Исходя из предоставленного вами небольшого фрагмента, похоже, что вы нацеливаетесь на элемент, содержащий изображение, а не на само изображение. Это может быть источником вашей проблемы.

Answer 2

Я нашел решение моей проблемы.Это выглядит следующим образом:

Мой метод выше не работает, если событие загрузки dom срабатывает до события ошибки img.Поэтому мне пришлось изменить свой код, чтобы дождаться события window.onload, а затем проверить, не повреждено ли какое-либо из изображений.

  $(window).bind('load', function() {
        $('.imagecontainer').find('img').each(function() {
            if ((typeof this.naturalWidth != "undefined" && this.naturalWidth == 0) || this.readyState == 'uninitialized') {
                // Image not available
                $(this).parent().hide();
            }
        });
    });

Кажется, это хорошо работает.* Однако у меня есть одна проблема.Если изображение загружается динамически, например.В модальном всплывающем окне или через вызов jjery ajax это не работает.Я обходил это в прошлом, используя .live () для моего jquery.Есть ли способ включить функцию .live () в вышеприведенное?Или альтернатива для обработки динамически загружаемых изображений.