Comment gérer “l'image corrompus ou tronquée” dans firefox

PLUGIN

Je suis à l'aide de jQuery plugi appelé lazyload.

Ce que ce n'est lazy de charger des images, - ce qui signifie qu'il ne les affiche pas dans le navigateur jusqu'à ce que l'image est dans le cadre de la fenêtre d'affichage.

Ceci est utile lorsque vous avez une page qui a beaucoup d'images, par exemple, et vous n'avez pas envie de passer l'éternité avec la charge initiale.

FIREFOX

Ok, donc je suis également en utilisant Firefox version 23.0.1

PROBLÈME

Le plug-in est grand, cependant, lorsque vous faites défiler vers le bas après les quelques images que j'ai commencer à avoir des erreurs où l'image ne se charge pas (a juste un générique titulaire de place pour un bris du lien de l'image) et dans la console il journaux:

Image corrupt or truncated: [image url]

C'est pas qu'il y ait un problème avec l'image. Ils ont tous rendu fine individuellement.

Il n'est pas sur une image SPÉCIFIQUE comme c'est aléatoire. Si je charge la page, les images qui ont été corrupt peut charger maintenant, avec d'autres images retour d'un lien brisé et la journalisation corrupt dans la console.

J'ai cherché autour de cela, et il semble qu'il y a un problème avec interprétation simultanée des extractions pour un <img> src de la balise.

Éventuellement, il devrait y avoir un délai fixé sur le fetch, mais vous ne pouvez pas toujours dire combien de temps le retard devrait être. Et si une image est plus grande que l'autre, il pourrait toujours des conflits (avec un statique de temps de retard, par opposition à un complete de rappel).

Par conséquent, je voudrais demander:

a) Si quelqu'un connait une solution à ce (tels que la capture lorsque l'erreur se produit et re-déclenchement de la charge de l'image)

b) Si tout le monde peut proposer un $.extend() à la bibliothèque ci-dessus (lazyload) qui permettrait de créer une fonction de rappel et d'attendre jusqu'à ce que tous les actifs extractions sont complete avant le chargement de la prochaine (SI ce n'est le problème - je ne suis pas sûr si c'est)
je ne suis pas un jQuery ninja donc je suis un peu perdu sur le code. Je pouvais le comprendre, mais il serait sans doute d'être sale...

c) si ce n'est PAS le problème, alors que des directives sur comment je peux résoudre ce serait appréciée

  • Vérifiez votre réseau onglet dans votre navigateur de la console/outils de développement. Comment les demandes d'image ressemble? Ce des en-têtes de vous recevoir à partir du serveur? p/s: If anybody can propose an $.extend() to the library above... ce n'est pas comment cela fonctionne.
  • Merci - j'ai vérifié l'onglet réseau et chaque fichier est appelé et obtient un statut HTTP 200 code. Si le fichier existe. Certains de rendu, d'autres pas. Il ne semble pas particulière à la taille du fichier. Autre chose que je dois vérifier? ...
  • pourriez-vous partager le code dans jsfiddle, il est difficile de prédire ce qui provoque le problème.
InformationsquelleAutor Walker Farrow | 2015-09-08
  1. 6

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

    Il semble que lors de la modification de l'attribut src de la balise img,
    Firefox déclenche un événement de chargement. C'est contraire à l'HTML5
    cahier des charges, qui dit que si l'attribut src est changé, alors
    toute autre fetch déjà en cours doit être terminé     (dont Firefox
    n'), et pas d'événements doivent être envoyées. L'événement load doit être envoyé
    seulement si l'extraction a été réalisée avec succès. Donc, je dirais que le fait
    que vous obtenez un événement de chargement est un bug Firefox.

    Et puis:

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

    Qui a du sens.
    À l'intérieur de lazyload code, vous trouverez cette partie, qui semble être quand l'image se charge, répondre à un défilement de l'événement 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 mettre un opérateur ET suivi par quelques pavillon ou le fuction de retour qui vérifie si la dernière image est déjà entièrement chargé, sur cette partie:

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

    empêchant ainsi que img src sera remplacé avant son heure correcte (depuis settings.placeholder est l'image que le script prend à la place de celui sur le point d'être chargé lors du défilement) et voyez si cela fonctionne pour vous.

    • Cette solution est bien sur l'idée que ça va être de la main pour vous de créer un nouveau <img> balise à chaque fois que la fenêtre d'affichage de la portée déclenche l'événement. Si ce n'est pas un problème, alors vous devriez considérer le lié réponse (comme je pense que vous avez déjà fait 🙂 )
    • merci. Cette plus ou moins de points-moi dans la bonne direction. Ce que je pense que le réel problème est de savoir comment Firefox gère la mémoire pour de nombreuses balises d'image ouvert à la fois. Je vais donc modifier ce code afin que lorsque l'image "disparaît" de la fenêtre d'affichage, il supprime l'img lui-même (ou quelque chose comme ça). J'espère que cela efface la mémoire. Nous allons voir... Tks
    InformationsquelleAutor Alan Machado
  2. 0

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

    Actuellement v 1.9.7 est la dernière. Il pourrait être un bug qu'ils ont déjà fixé.
    ( changelog: https://github.com/tuupola/jquery_lazyload/blob/master/CHANGELOG.textile )

    Deuxièmement, ce qui en jQuery version utilisez-vous? Peut-être un très vieux jQuery avec un vieux lazyload de la bibliothèque sont les causes de ce problème? (Ou peut-être la plus récente de jQuery?)

    Si c'est tout beau, peut-être que vous pouvez regarder dans la façon dont le lazyload est-elle engagée? Avez-vous de l'ajax, des demandes et de ré-initier le lazyloading? (Ne devrait pas causer de problèmes, mais on ne sait jamais). Ou essayez les différents doctype/structure html?

    Si rien ne fonctionne, je 'bande' le document html à vraiment propre version où le lazyloading œuvres (localhost test, ou jsfiddle ou quelque chose) et de remettre les pièces une par une. Finalement, vous devriez voir où les sauts de fonctionnalité.

    Avec jQuery v1.9.1 et Lazyload v1.9.7 il devrait fonctionner avec ce:

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

    Ici est un jsfiddle pour les essais de: http://jsfiddle.net/web_nfo/21qb88v1/

    Ou peut-être que Firefox est juste le problème. Actuellement la version 40 est récente. Peut-être que vous avez aussi un "bêta" de la version installée? Ou safe mode?

    InformationsquelleAutor Develop123