événement onerror utilisant background: url()
Existe-t-il un moyen d'afficher une autre image si l'image source n'est pas trouvée? Je sais que pour accomplir cela, c'est en faisant 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 cela, comment pouvez-vous attraper si il y a une erreur ou si l'image n'est pas trouvé?
<div style="background:url('myimage.gif')"></div>
3 réponses
Dans le cas où 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.
Remarque que fallback.gif peut être téléchargé, même si myimage.gif est disponible.
Alternativement, même si elles ne sont pas largement prises en charge, css Images 3 introduit la notation image() :
background: image('myimage.gif', 'fallback.gif');
Multiples
<image-decl>speut être donné séparés par des virgules, dans la fonction représente la première image qui n'est pas un image non valide .
Avec les images d'arrière-plan, il n'y a pas d'événement; vous devez vérifier vous-même.
Faites une requête HTTP (XML) , et si vous obtenez une réponse avec un code d'état d'erreur ou aucune réponse (après le délai d'attente), utilisez une autre ressource d'image. Cette approche est limitée par la Politique de même origine .
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"
>
';