Détecter "l'image corrompue ou tronquée" dans Firefox

(Frappe préventive: Si vous êtes tenté de marque ce comme un doublon, notez que d'autres questions semblent se poser la question "pourquoi suis-je obtenir cette erreur?" Je sais pas pourquoi j'obtiens cette erreur; je veux savoir comment je peux détecter l'erreur dans mon code JavaScript. Il apparaît uniquement dans la console de Firebug et, bien sûr, est évidente pour l'utilisateur lorsque l'image est chargée.)

Je suis en utilisant picturefill pour les images responsives. J'ai un callback qui est déclenché pour l'événement de chargement sur les images. Donc, le rappel s'exécute chaque fois que quelqu'un redimensionne la fenêtre du navigateur, tels que l'image est chargée via picturefill.

À l'intérieur de la fonction de rappel, je suis à la conversion des données d'image à un dataURL via la toile afin que je puisse mettre en cache les données d'image dans localStorage il est donc accessible à l'utilisateur, même quand ils sont hors ligne.

Note de la partie sur le "hors ligne". C'est pourquoi je ne peux pas compter sur le cache du navigateur. Et le HTML5 hors ligne de cache de l'application ne répond pas à mes besoins, car les images sont sensibles. (Voir "Le Cache de l'Application est un Connard" pour l'explication de l'incompatibilité des images responsives avec HTML hors ligne de cache de l'application.)

Sur Firefox 14.0.1 sur un Mac, le chargement de l'image se déclenche si je redimensionner le navigateur à quelque chose de vraiment grand et redimensionner puis redescendre à un petit quelque chose de nouveau avant la grande image a une chance de se charger complètement. Il finit par les rapports de l'Image "corrompus ou tronquée" dans la console de Firebug, mais ne lance pas d'exception ou de déclencher un événement d'erreur. Aucune indication que quelque chose est incorrect dans le code. Juste dans la console de Firebug. Pendant ce temps, il stocke une image tronquée dans localStorage.

Comment puis-je de manière fiable et efficace de détecter ce problème au sein de JavaScript donc je ne cache pas que l'image?

Voici comment je boucle à travers le picturefill divs pour trouver les balises img) qui ont été insérés par picturefill:

    var errorLogger = function () {
        window.console.log('Error loading image.');
        this.removeEventListener('load', cacheImage, false);
    };

    for( var i = 0, il = ps.length; i < il; i++ ){
        if( ps[ i ].getAttribute( "data-picture" ) !== null ){

            image = ps[ i ].getElementsByTagName( "img" )[0];
            if (image) {
                if ((imageSrc = image.getAttribute("src")) !== null) {
                    if (imageSrc.substr(0,5) !== "data:") {
                        image.addEventListener("load", cacheImage, false);
                        image.addEventListener('error', errorLogger, false);
                    }
                }
            }
        }
    }

Et voici ce que le cacheImage() rappel ressemble:

var cacheImage = function () {
    var canvas,
        ctx,
        imageSrc;

    imageSrc = this.getAttribute("src");

    if ((pf_index.hasOwnProperty('pf_s_' + imageSrc)) ||
        (imageSrc.substr(0,5) === "data:") ||
        (imageSrc === null) || (imageSrc.length === 0)) {
            return;
    }

    canvas = w.document.createElement("canvas");
    canvas.width = this.width;
    canvas.height = this.height;

    ctx = canvas.getContext("2d");
    ctx.drawImage(this, 0, 0);
    try {
        dataUri = canvas.toDataURL();
    } catch (e) {
        //TODO: Improve error handling here. For now, if canvas.toDataURL()
        //  throws an exception, don't cache the image and move on.
        return;
    }

    //Do not cache if the resulting cache item will take more than 128Kb.
    if (dataUri.length > 131072) {
        return;
    }

    pf_index["pf_s_"+imageSrc] = 1;

    try {
        localStorage.setItem("pf_s_"+imageSrc, dataUri);
        localStorage.setItem("pf_index", JSON.stringify(pf_index));
    } catch (e) {
        //Caching failed. Remove item from index object so next cached item
        //  doesn't wrongly indicate this item was successfully cached.
        delete pf_index["pf_s_"+imageSrc];
    }
};

Enfin, voici le texte complet de ce que je vois dans Firebug avec l'URL changés pour protéger les coupables:

Image corrompus ou tronquée: http://www.example.com/pf/external/imgs/extralarge.png

source d'informationauteur Trott