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

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

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

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

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

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

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

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

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

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

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

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

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

Вы можете посмотреть событие 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, когда документ готов, некоторые браузеры могут не запускать этот обработчик – вы должны проверить его на своей целевой платформе.

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

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

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

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

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

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

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

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

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

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