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
Vous devez vous connecter pour publier un commentaire.
Il semble que lors de la modification de la
src
attribut de laimg
tag, Firefox déclenche unload
événement. Ceci est contraire à la spécification HTML5, qui dit que si l'attribut src est changé, alors toute autre fetch déjà en cours doit être terminé (Firefox), et pas de événements doit être envoyée. Leload
événement doit être envoyé uniquement si l'extraction a été réalisée avec succès. Donc, je dirais que le fait que vous obtenez unload
événement est un bug Firefox.Cependant, l'image devrait savoir si il est entièrement disponible ou pas, vous pouvez essayer d'utiliser le
complete
attribut:Malheureusement, Firefox a
this.complete
ensemble detrue
au lieu de cela, ce n'est donc pas une option.La meilleure option pourrait être de créer un nouveau
<img>
élément chaque fois que vous souhaitez changer lesrc
attribut.J'ai été abasourdi par cette question aujourd'hui, moi-même. Tout fonctionnait bien (les images chargées visuellement comme prévu), sauf que l'erreur gardé d'apparaître dans la console d'erreur de Firefox - pas de telles erreurs dans IE ou Chrome.
Dans mon cas, j'ai été de brancher une image dans une div avec innerHtml dans un complet jquery gestionnaire. Les erreurs arrêté quand j'ai mis en pause le jquery appel avec:
Il a travaillé pour moi, mais il n'a toujours aucun sens. Je suppose que c'est quelque chose à voir avec le calendrier que ce code déclenche l'image à charger avant qu'il arrive à du code qui en fait la branche dans la page.