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

Question

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

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

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

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

Рассматриваемые изображения - это преимущественно изображения трекинга 1x1, но могут содержать изображения, которые должны быть видны, если они доступны.

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

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

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

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

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

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

Answer 1

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

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

<img src="image.png" alt="image" onerror="this.parentNode.removeChild(this)" />

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

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

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

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

Answer 2

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

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

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

Answer 3

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

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

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

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

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

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

Answer 4

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