Скрытие изображений, которые не загружались

У меня есть приложение для Android, которое генерирует некоторый HTML, который отображается локально, в представлении Webkit.

Детали генерации HTML не так важны, за исключением:

  • основная его часть исходит из одного места, и я не могу ее изменить
  • шаблон вокруг этого HTML (включая заголовки, нижние колонтитулы, HEAD и т.д.), CSS и Javascript находятся под моим контролем.
  • большинство изображений находятся под моим контролем и отображаются отдельно от неприкасаемого HTML. Эти изображения поступают с локального диска и не требуют подключения к сети. Можно предположить, что эти изображения всегда доступны.
  • неприкасаемый HTML содержит изображения, которые в идеале отображались бы. Если сеть недоступна, эти изображения не будут загружаться.
  • полный HTML файл, скорее всего, будет спрятан на диск, задолго до его рендеринга. то есть мы не можем отображать различные HTML на основе доступности сети.

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

Изображения, о которых идет речь, являются преимущественно 1x1 отслеживающими изображениями, но могут включать изображения, которые должны быть видны, если они доступны.

Без вызова JQuery или внешней библиотеки, что бы вы посоветовали моему плану атаки?

У меня есть мысли о том, как это сделать, но поймите, что у них много подводных камней, о которых нужно беспокоиться:

  • с помощью селектора CSS, выберите все изображения, которые не были загружены (есть ли такой селектор?) и используйте display:none;.
  • с Javascript, установите атрибут alt для каждого изображения в пустую строку. Это нужно сделать на document.onLoad?
  • проверьте доступность сети, а затем с помощью CSS скройте все изображения с помощью @href ~ = ^ http. Я не уверен, как/когда применять этот стиль.

Если это помогает, для этой проблемы у меня, похоже, есть следующие проблемы. Непонятна оптимальная стратегия для любого из них:

  • как определить загруженность изображений или состояние сети.
  • как скрыть/замаскировать не загруженные изображения, чтобы пользователь не обнаружил, что изображение отсутствует.
  • когда для выполнения этих задач (например, когда документ/окно закончил загрузку?)
  • как их применять.

Любые мысли, код, предложения будут с благодарностью получены.

ОТВЕТЫ

Ответ 1

  • как определить загруженность изображений или состояние сети.
  • как скрыть/замаскировать не загруженные изображения, чтобы пользователь не обнаружил, что изображение отсутствует

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

<img src="image.png" alt="image" onerror="this.parentNode.removeChild(this)" />
  • когда для выполнения этих задач (например, когда документ/окно закончил загрузку?)
  • как их применять.

Это работало для меня в Firefox и Chrome, когда я добавил его в самый конец моего документа (до </body> ):

var imgs = document.getElementsByTagName('img')
    for(var i=0,j=imgs.length;i<j;i++){
        imgs[i].onerror = function(e){
        this.parentNode.removeChild(this);
    }
}

Совершенно очевидно, что если изображение в начале вашего документа не загружалось, и вы прикрепляете обработчики событий yor, когда документ готов, некоторые браузеры могут не запускать этот обработчик - вы должны проверить его на своей целевой платформе.

Ответ 2

как определить загруженность изображения или состояние сеть.

Один подход может заключаться в том, чтобы поддерживать ссылки на все изображения в DOM и связывать событие onload, которое запускается, когда изображение закончило загрузку. Через определенное количество времени любое изображение, которое не срабатывало, может считаться проблематичным.

как скрыть/замаскировать не удалось загрузить изображения, чтобы он не был обнаружен что изображение отсутствует.

Вы уже упоминали некоторые варианты. Вы думали об удалении элемента из DOM? Клиент больше не будет загружать изображение.

когда для выполнения этих задач (например, когда документ/окно завершено загрузка?)

Вы не можете использовать события document или window onload, потому что это не срабатывает, пока не загрузится все содержимое DOM. Проверка готовности DOM зависит от браузеров (Lucky вы имеете дело только с одним!). Это может заставить вас начать.

Ответ 3

Интересный вопрос.

В Firefox, если изображение не загружается, его naturalHeight (и ширина тоже) равно 0. Вероятно, вы можете использовать некоторый javascript в android для чтения аналогичного свойства. Мой тест script в Firebug был просто:

document.getElementsByTagName('img')[0].naturalHeight

Ответ 4

Если ваши изображения не довольствуются потреблением, а не текстом или дополняют текст, они должны быть фоновыми изображениями CSS. Фоновые изображения полностью пассивны и вообще не отображаются, если их невозможно получить или обработать.