Détection d'une image 404 en Javascript

Question

Détection d'une image 404 en Javascript

Demandé el 10 de Juin, 2010: Quand la question a-t-elle été
16105 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Après qu'un utilisateur ait téléchargé un fichier, nous devons effectuer un traitement supplémentaire des images, comme le redimensionnement et le téléchargement vers S3. Cela peut prendre jusqu'à 10 secondes supplémentaires. Évidemment, nous faisons cela en arrière-plan. Cependant, nous voulons montrer à l'utilisateur la page de résultats immédiatement et simplement montrer les spinners en place jusqu'à ce que les images arrivent dans leur emplacement permanent sur S3.

Je cherche un moyen de détecter qu'une certaine image n'a pas réussi à se charger correctement (404) dans un autre navigateur. Si cela se produit, nous voulons utiliser JS pour montrer un spinner à sa place et recharger l'image toutes les quelques secondes jusqu'à ce qu'elle puisse être chargée avec succès depuis s3.

Demandé el 10 de Juin, 2010 par Tobias Lütke

1 votes

IIRC, il y a un événement onerror pour les images... devguru.com/technologies/javascript/10916.asp

Commenté el 11 de Juin, 2010 par scunliffe

2 votes

Ver stackoverflow.com/questions/92720/

Commenté el 11 de Juin, 2010 par Gert Grenander

1 votes

@Dorathoto pourquoi la prime ? La réponse la plus votée est la meilleure : stackoverflow.com/questions/3019077/

Commenté el 29 de Avril, 2021 par Twisting nether

Answer 1

5 Réponses

Answer 2

66voto

SLaks Points 391154

Manipuler le <img> de l'élément onerror événement.

Répondu el 10 de Juin, 2010 par SLaks (391154 Points )

10 votes

@xal : Assurez-vous simplement d'accrocher le error événement antes de vous définissez le src (si vous faites cela avec new Image ou document.createElement("img") plutôt que par une chaîne HTML). Sinon, vous vous trouvez dans une situation de course et l'événement pourrait se déclencher avant que vous ne commenciez à le traiter (tout comme la fonction load événement).

Commenté el 11 de Juin, 2010 par T.J. Crowder

1 votes

@T.J : Pas nécessairement. Javascript s'exécute sur le fil d'exécution de l'interface utilisateur, donc si vous traitez l'événement immédiatement après avoir configuré la fonction src il ne devrait pas y avoir de risque. Cependant, vous avez toujours raison,

Commenté el 11 de Juin, 2010 par SLaks

9 votes

Javascript s'exécute sur le thread Javascript, qui sur certains navigateurs est également le fil conducteur de l'interface utilisateur. Ce n'est pas nécessairement le fil de téléchargement. J'ai aidé des gens à corriger des bugs causés précisément par cela, en mettant src avant de fixer un load manipulateur. Il y a une condition de course là. Si le gestionnaire est déjà enregistré, le code de traitement de l'événement le placera sur la pile d'exécution pour être exécuté une fois que le thread JS sera disponible pour faire autre chose. Si vous ne l'avez pas, vous pouvez manquer l'événement.

Commenté el 11 de Juin, 2010 par T.J. Crowder

Afficher 2 autres commentaires

Answer 3

39voto

Dorathoto Points 365

Première option :

<img src="picture1.gif" onerror="this.onerror=null;this.src='missing.gif';"/>

Deuxième option :

<html>
<head>
<script type="text/javascript">
    function ImgError(source){
        source.src = "/noimage.gif";
        source.onerror = "";
        return true;
    }
</script>
</head>
<body>
    <img src="image_example1.jpg" onerror="ImgError(this)" />
</body>
</html>

PS : c'est du pur javascript ! vous n'avez pas besoin de bibliothèques. (Vanilla JS)

Exemple dans Fidler

https://jsfiddle.net/dorathoto/8z4Ltzp8/71/

Répondu el 6 de Janvier, 2016 par Dorathoto (365 Points )

Answer 4

12voto

unomi Points 1846

De : http://lucassmith.name/2008/11/is-my-image-loaded.html

// First a couple helper functions
function $(id) {
    return !id || id.nodeType === 1 ? id : document.getElementById(id);
}
function isType(o,t) {    return (typeof o).indexOf(t.charAt(0).toLowerCase()) === 0;}

// Here's the meat and potatoes
function image(src,cfg) {    var img, prop, target;
    cfg = cfg || (isType(src,'o') ? src : {});

    img = $(src);
    if (img) {
        src = cfg.src || img.src;
    } else {
        img = document.createElement('img');
        src = src || cfg.src;
    }

    if (!src) {
        return null;
    }

    prop = isType(img.naturalWidth,'u') ? 'width' : 'naturalWidth';
    img.alt = cfg.alt || img.alt;

    // Add the image and insert if requested (must be on DOM to load or
    // pull from cache)
    img.src = src;

    target = $(cfg.target);
    if (target) {
        target.insertBefore(img, $(cfg.insertBefore) || null);
    }

    // Loaded?
    if (img.complete) {
        if (img[prop]) {
            if (isType(cfg.success,'f')) {
                cfg.success.call(img);
            }
        } else {
            if (isType(cfg.failure,'f')) {
                cfg.failure.call(img);
            }
        }
    } else {
        if (isType(cfg.success,'f')) {
            img.onload = cfg.success;
        }
        if (isType(cfg.failure,'f')) {
            img.onerror = cfg.failure;
        }
    }

    return img;
}

Et voici comment l'utiliser :

image('imgId',{
    success : function () { alert(this.width); },
    failure : function () { alert('Damn your eyes!'); },
});

image('http://somedomain.com/image/typooed_url.jpg', {
    success : function () {...},
    failure : function () {...},
    target : 'myContainerId',
    insertBefore : 'someChildOfmyContainerId'
});

Répondu el 10 de Juin, 2010 par unomi (1846 Points )

0 votes

Cela soulève un bon point. Vous (OP) devez charger les images avec des paramètres de chaîne de requête aléatoires.

Commenté el 11 de Juin, 2010 par SLaks

7 votes

Le lien est mort. Cette réponse devrait être modifiée pour contenir du contenu ou se voir retirer sa coche verte.

Commenté el 18 de Mars, 2013 par mxcl

0 votes

KISS (pour Keep It Super Simple)

Commenté el 24 de Juin, 2014 par Daniele Brugnara

Afficher 2 autres commentaires

Answer 5

11voto

oasisfleeting Points 101

Il suffit de lier le déclencheur attr sur l'événement d'erreur.

$(myimgvar).bind('error',function(ev){
    //error has been thrown
    $(this).attr('src','/path/to/no-artwork-available.jpg');
}).attr('src',urlvar);

Répondu el 12 de Janvier, 2015 par oasisfleeting (101 Points )

Answer 6

3voto

griegs Points 14142

Ce site explique en détail comment procéder.

Détecter les images cassées en JavaScript

Répondu el 10 de Juin, 2010 par griegs (14142 Points )

Détection d'une image 404 en Javascript

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Détection d'une image 404 en Javascript

Réponses

Questions connexes

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: