событие onerror с использованием фона: url()

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

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

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

<div style="background:url('myimage.gif')"></div>
23
background css html image onerror

3 ответов

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

73

с фоновыми изображениями нет никакого события; вы должны проверить себя.

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

3

вы также можете использовать фиктивное изображение и использовать событие onerror оттуда ...

        $imageFoo = '
        <div id="' . $uniqueId . '"
             style="
                background-image: url(//foo.lall/image.png);
                -webkit-background-size: contain;
                -moz-background-size: contain;
                -o-background-size: contain;
                background-size: contain;
                background-position: center;
                background-repeat: no-repeat;
             "
        ></div>
        <!-- this is a helper, only needed because "background-image" did not fire a "onerror" event -->
        <img style="display: none;" 
             src="//foo.lall/image.png" 
             onerror="var fallbackImages = $(this).data(\'404-fallback\'); $(\'#' . $uniqueId . '\').css(\'background-image\', \'url(\' + fallbackImages + \')\');"
             data-404-fallback="//foo.lall/image_fallback.png"
        >
        ';
0