web-dev-qa-db-fra.com

événement onerror utilisant background: url ()

Existe-t-il un moyen d'afficher une image alternative si l'image source n'est pas trouvée? Je sais que pour ce faire, faites quelque chose comme ci-dessous:

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

Mais que diriez-vous si vous faites quelque chose comme ça, comment pouvez-vous attraper s'il y a une erreur ou si l'image n'est pas trouvée?

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

Si myimage.gif N'est pas transparent, vous pouvez utiliser plusieurs arrière-plans:

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

De cette façon, fallback.gif Ne sera visible que si myimage.gif N'est pas disponible.

Notez que fallback.gif Peut être téléchargé même si myimage.gif Est disponible.

Alternativement, même si elle n'est pas largement prise en charge, CSS Images 3 introduit la notation image() :

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

Plusieurs <image-decl>s peuvent être donnés séparés par des virgules, auquel cas la fonction représente la première image qui n'est pas image invalide .

87
Oriol

Avec les images d'arrière-plan, il n'y a pas d'événement; vous devez vous vérifier.

Faire une requête HTTP (XML) , et si vous obtenez une réponse avec n code d'état d'erreur ou aucune réponse (après le délai d'expiration), utilisez une autre ressource d'image. Cette approche est limitée par la politique de même origine .

3
PointedEars

Vous pouvez également utiliser une image factice et utiliser l'événement onerror à partir de là ...

        $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"
        >
        ';
2
Lars Moelleken