web-dev-qa-db-fra.com

Comment gérer "une image corrompue ou tronquée" dans Firefox

BRANCHER

J'utilise un plugi jQuery appelé lazyload .

lazy load images - Cela signifie que cela ne les restitue pas dans le navigateur tant que l'image ne se trouve pas dans la portée de la fenêtre d'affichage.

Ceci est utile lorsque vous avez une page contenant de nombreuses images, par exemple, et que vous ne voulez pas qu'elle passe éternellement avec le chargement initial.

FIREFOX

Ok, j'utilise aussi Firefox version 23.0.1

PROBLÈME

Le plug-in est génial, mais lorsque je fais défiler l'écran vers le bas après certaines images, des erreurs se produisent lorsque l'image ne se charge pas (elle a juste un emplacement générique pour un lien d'image cassé) et dans la console, il enregistre:

Image corrupt or truncated: [image url]

Ce n'est pas qu'il y a un problème avec l'image. Ils rendent tous bien individuellement.

Ce n'est pas sur une image spécifique car c'est aléatoire. Si je charge à nouveau la page, les images qui étaient corrupt peuvent se charger maintenant, avec d'autres images renvoyant un lien rompu et enregistrant corrupt dans la console.

J'ai cherché autour de cela, et il semble qu'il y ait un problème avec les extractions simultanées pour une balise <img> src. 

Un délai devrait peut-être être défini lors de l'extraction, mais vous ne pouvez pas toujours savoir combien de temps il devrait durer. Et si une image est plus grande qu'une autre, elle pourrait toujours être en conflit (avec un délai statique, par opposition à un rappel complete).

Par conséquent, je voudrais demander:

a) Si quelqu'un connaît une solution à ce problème (par exemple, en détectant l'erreur et en déclenchant de nouveau la fonction load image)
b) Si quelqu'un peut proposer une $.extend() à la bibliothèque ci-dessus (lazyload) qui créerait une fonction de rappel et attendrait que tous les extractions actives soient complete avant de charger la suivante (SI c'est le problème - je suis je ne sais pas si c'est) Je ne suis pas un ninja jQuery alors je suis un peu perdu sur le code. Je pourrais le comprendre, mais ce serait probablement sale ...
c) si ce n’est PAS le problème, des conseils sur la façon dont je peux résoudre ce problème seraient appréciés.

jqueryimagefirefoxlazy-loadingjquery-lazyload
17
Walker Farrow

Comme suggéré sur cette réponse à un problème similaire au vôtre:

Il semble que lors du changement de l'attribut src de la balise img, Firefox déclenche un événement de chargement. Ceci est contraire au HTML5 spécification, qui dit que si l'attribut src est modifié, alors toute autre extraction déjà en cours doit être terminée (ce que fait Firefox ), et aucun événement ne doit être envoyé. L'événement de chargement doit être envoyé seulement si l'extraction a été effectuée avec succès. Donc, je dirais que le fait que vous obteniez un événement de chargement est un bogue de Firefox.

Et alors:

La meilleure option peut être de créer un nouvel élément à chaque fois que vous souhaite changer l'attribut src.

Ce qui a du sens…. À l’intérieur du code lazyload, vous trouverez cette partie, qui semble être celle au chargement de l’image, en réponse à un événement de défilement qui déclenche appear:

    /* When appear is triggered load original image. */
    $self.one("appear", function() {
        if (!this.loaded) {
            if (settings.appear) {
                var elements_left = elements.length;
                settings.appear.call(self, elements_left, settings);
            }
            $("<img />")
                .bind("load", function() {

                    var original = $self.attr("data-" + settings.data_attribute);
                    $self.hide();
                    if ($self.is("img")) {
                        $self.attr("src", original);
                    } else {
                        $self.css("background-image", "url('" + original + "')");
                    }
                    $self[settings.effect](settings.effect_speed);

                    self.loaded = true;

Vous pouvez placer un opérateur AND suivi d'un indicateur ou d'un retour de fonction permettant de vérifier si la dernière image est déjà entièrement chargée sur cette partie:

if ($self.is("img") && lastImageIsLoadde() === true) { /*pseudocode here*/

empêchant ainsi que img src soit remplacé avant son heure exacte (puisque settings.placeholder est l'image que le script prend à la place de celle sur le point d'être chargée lors du défilement) et voir si cela fonctionne pour vous.

6
Alan Machado

Je voudrais d’abord vérifier si vous avez une version mise à jour de la bibliothèque lazyload . https://github.com/tuupola/jquery_lazyload/blob/master/jquery.lazyload.min.js

Actuellement, la version 1.9.7 est la dernière. Il pourrait s’agir d’un bogue qu’ils ont déjà corrigé . (Journal de changements: https://github.com/tuupola/jquery_lazyload/blob/master/CHANGELOG.textile )

Deuxièmement, quelle version de jQuery utilisez-vous? Peut-être un très vieux jQuery avec une ancienne bibliothèque de lazyload pose-t-il ce problème? (Ou peut-être le plus récent jQuery?)

Si tout va bien, vous pouvez peut-être regarder comment le lazyload est lancé? Avez-vous des requêtes ajax et relancez-vous le lazyloading? (Ne devrait pas causer de problèmes, mais on ne sait jamais). Ou essayez une autre structure doctype/html?

Si rien ne fonctionne, je «dépouille» le document HTML pour en faire une version vraiment nette où le lazyloading fonctionne (juste des tests sur localhost, ou jsfiddle ou quelque chose du genre) et je remets les pièces une par une. Éventuellement, vous devriez voir où la fonctionnalité est interrompue.

Avec jQuery v1.9.1 et Lazyload v1.9.7, cela devrait fonctionner avec:

$('.lazy').lazyload();

Voici un jsfiddle à tester: http://jsfiddle.net/web_nfo/21qb88v1/

Ou peut-être que Firefox est juste le problème. Actuellement, la version 40 est la plus récente. Peut-être avez-vous aussi une version 'beta' installée? Ou le mode sans échec?

0
Develop123