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), и если вы получите ответ с код состояния ошибки или вообще никакого ответа (после таймаута), используйте другой ресурс изображения. Этот подход ограничен Политика одинакового происхождения.
