Onerror с использованием фона: url()

Есть ли способ показать альтернативное изображение, если исходное изображение не найдено? Я знаю, чтобы выполнить это, выполнив что-то вроде ниже:

<img src="imagenotfound.gif" alt="Image not found" onError="this.src='imagefound.gif';" />

Но как насчет того, что вы делаете что-то вроде этого, как вы можете поймать, есть ли ошибка или если изображение не найдено?

<div style="background:url('myimage.gif')"></div>

ОТВЕТЫ

Ответ 1

Если myimage.gif не является прозрачным, вы можете использовать несколько фонов:

background: url('myimage.gif'), url('fallback.gif');

Этот способ fallback.gif будет отображаться только в том случае, если myimage.gif недоступен.

Обратите внимание, что fallback.gif может быть загружен, даже если myimage.gif доступен.

В качестве альтернативы, хотя и не поддерживается широко, CSS Images 3 представляет ноту image():

background: image('myimage.gif', 'fallback.gif');

Несколько <image-decl>s можно дать через запятую, в в этом случае функция представляет первое изображение, которое не является недействительный образ.

Ответ 2

С фоновыми изображениями нет события; вы сами проверяете.

Сделать HTTP-запрос (XML), и если вы получите ответ с код состояния ошибки или вообще никакого ответа (после таймаута), используйте другой ресурс изображения. Этот подход ограничен Политика одинакового происхождения.