Ng-lazyload-image: TypeError : impossible de lire la propriété 'toLowerCase' d'undefined lors du chargement de la page à partir du milieu par rapport au haut

Créé le 18 juil. 2017  ·  11Commentaires  ·  Source: tjoskar/ng-lazyload-image

Salut,

J'ai découvert un bogue où si vous chargez une page défilée à mi-chemin (vs tout en haut), Node donne une erreur de "TypeError: Cannot read property 'toLowerCase' of undefined". Cela ne semble pas interrompre le plug-in car il continue de charger paresseux, mais le nouvel événement de sortie onLoad ne semble pas se déclencher correctement tant que vous n'êtes pas revenu tout en haut.

Comment recréer : Chargez votre page de test normalement, en haut. Faites défiler jusqu'à la moitié environ. Actualisez maintenant la page et commencez à faire défiler à partir du milieu. Vous devriez voir une erreur de nœud. Sinon, assurez-vous que vous utilisez l'événement de sortie onLoad. Si vous faites défiler tout en haut, vous devriez voir l'événement onLoad commencer à fonctionner soudainement.

Commentaire le plus utile

Tous les 11 commentaires

Salut,

Je n'arrive pas à reproduire ça :/
Lorsque vous dites "Chargez votre page de test normalement". Voulez-vous dire cette page : https://tjoskar.github.io/ng-lazyload-image ou exécutez-vous la page localement avec npm start ?

Quel navigateur utilisez-vous?

Pour une raison quelconque, sur github.io, je ne peux pas actualiser la page après l'avoir chargée une fois. Il dit que 404 n'est pas trouvé à chaque fois :(

Mais en général, je veux dire localement avec n'importe quel projet - j'utilise Angular 4 avec Universal et Node (donc universel pourrait avoir quelque chose à voir avec cela). Utilisation de Chrome 59 pour Windows 10. Je pense que cela pourrait être un bogue avec la nouvelle fonctionnalité onLoad, mais pas positif. L'erreur n'apparaît que dans la console Node, ne semble pas générer d'erreurs dans la console Chrome.

Salut @elitenick ,
Pouvez-vous donner une trace d'erreur complète de la pile ?

@tjoskar
Je pense que cette erreur est liée à https://github.com/tjoskar/ng-lazyload-image/blob/master/src/lazyload-image.ts#L75 , avant ici, il y aura une erreur, mais depuis ce n'est pas le cas.
Dans Angular Universal ici https://github.com/tjoskar/ng-lazyload-image/blob/master/src/lazyload-image.ts#L47 produisant une erreur, car element dans le serveur n'est pas défini.
Je pense qu'une très bonne solution au problème consiste à désactiver lazy img côté serveur.

Pour une raison quelconque, sur github.io, je ne peux pas actualiser la page après l'avoir chargée une fois. Il dit que 404 n'est pas trouvé à chaque fois :(

Oui, c'est parce que github ne prend pas en charge la redirection de toutes les requêtes vers index.html (mais c'est un problème complètement différent)

Cela a probablement quelque chose à voir avec Angular Universal mais il y a quelques choses que je ne comprends pas :

  1. Pourquoi n'obtenez-vous l'erreur que lorsque vous actualisez la page ? Le nœud ne doit pas obtenir d'informations sur la position du défilement ou s'il s'agit de votre première ou deuxième visite (le backend ne doit avoir aucun état de ce type).
  2. Disons que c'est cette rangée qui pose problème. Si c'est le cas, element ne peut pas être indéfini car nous accédons à nodeName partir de element sans aucune erreur et de plus, nous utilisons element dans isVisible() et nous utilisons même window dans cette fonction, qui devrait être indéfinie dans un contexte de serveur.

Je pense que cela pourrait être un bug avec la nouvelle fonctionnalité onLoad mais pas positif

Utilisez-vous (onLoad) ? Pouvez-vous essayer de le supprimer et voir si vous pouvez reproduire l'erreur ?

@rimlin

Je pense qu'une très bonne solution au problème consiste à désactiver lazy img côté serveur.

Ouais, ça n'a aucun sens de charger des images paresseux sur le serveur (puisque nous ne savons rien de la taille de l'écran).
Peut-être pouvons-nous simplement ajouter if (isPlatformServer(this.platformId)) return; ( ref ) dans ngAfterContentInit .

@elitenick , je viens de publier [email protected] avec @rimlin pull request. Pouvez-vous l'installer ( npm install [email protected] ) et voir si cela résout le problème ?

Avec certitude! Je le vérifierai aujourd'hui et je vous tiendrai au courant ! Merci les gars.

C'est réparé! Merci beaucoup!! J'ai recréé mon même scénario plusieurs fois et plus d'erreurs de nœud. Et le chargement paresseux continue de fonctionner une fois Angular activé.

Inclus dans [email protected] .

Cette page vous a été utile?
0 / 5 - 0 notes