18041 sujets

Questions générales et questions de débutants

[Résolu] Chrome et le scroll infini

Bonjour,

J'ai mis en place un petit blog, le temps d'un voyage, dans lequel les articles sont chargés dynamiquement en fonction du scroll. Sous IE/Edge et Firefox, aucun problème. Par contre, sous Chrome, dès qu'un article est ajouté à la fin de la page, le navigateur panique complètement, fait un redraw de tout la page et recharge toutes les images, sans oublier de scroller tout seul quelques centaines de px plus haut.

Ma question est donc simple : Est-ce un problème d'optimisation de mon JS ou un bug du navigateur ? Dans les deux cas, comment éviter ce comportement ?

Voilà le site en question : usa.gbauer.fr
(Le JS : usa.gbauer.fr/js/main.js)

Merci d'avance pour vos réponses Smiley cligne
Bguigui67 a écrit :
Bonjour,
J'ai mis en place un petit blog, le temps d'un voyage, dans lequel les articles sont chargés dynamiquement en fonction du scroll. Sous IE/Edge et Firefox, aucun problème. Par contre, sous Chrome, dès qu'un article est ajouté à la fin de la page, le navigateur panique complètement, fait un redraw de tout la page et recharge toutes les images, sans oublier de scroller tout seul quelques centaines de px plus haut.
Ma question est donc simple : Est-ce un problème d'optimisation de mon JS ou un bug du navigateur ? Dans les deux cas, comment éviter ce comportement ?
Voilà le site en question : usa.gbauer.fr
(Le JS : usa.gbauer.fr/js/main.js)
Merci d'avance pour vos réponses Smiley cligne

Une ligne me paraît curieuse dans ton script :
images[i].style.backgroundPosition = `center ${bgPos}px`;

Je ne suis pas un spécialiste de javascript mais il m'avait semblé comprendre que les apostrophes et les guillemets anglais étaient seuls utilisés pour délimiter des chaînes de caractères.
Dans le cas présent, cela ressemble plus aux délimiteurs de commandes Unix.
Si on copie / colle le source sous Notepad++, le seul endroit où apparaissent ces caractères est dans le positionnement de l'image, sur l'événement scroll.
De là à penser qu'il y a un lien de cause à effet et que certains navigateurs s'en accomodent, d'autres non, il n'y a qu'un pas que je franchis allègrement Smiley smile .
Ceci dit, javascript n'est pas ma tasse de thé et peut-être que ces caractères font partie des spécifications et sont autorisés. Les cadors de ce langage sont donc invités à confirmer / infirmer ce point et le feront mieux que moi.[/i]
Ah oui, effectivement. C'est dans le bloc de code commenté. En fait, c'est un élément de syntaxe d'ES6 (ou ES2015). En gros, j'écris mon code en ES6, puis il est "compilé" en JS, "plus compréhensible par tout le monde". Visiblement, le "compilateur" ne touche pas au code commenté. Mais ça ne joue aucun rôle là dedans.
Hello !

Merci Zelena pour cette ressource extrêmement intéressante Smiley biggrin
Dans mon cas, je me contente simplement d'ajouter de nouveaux éléments à la fin, au bon moment (C'est un site développé en 2-3h Smiley biggol ).
Le problème semble venir de l'ajout d'éléments dans le DOM, que Chrome ne gère pas de la même manière que les autres navigateurs visiblement ...
Bon ben j'ai fini par trouver la solution et elle est pas si compliquée que ça.
Il ne faut simplement pas ajouter des éléments dans le DOM "à la sauvage", c'est à dire :

element.innerHTML += "...";


En générant les nouveaux éléments avec document.createElement et element.appendChild, Chrome semble moins râler...
Modifié par Bguigui67 (18 Jul 2016 - 03:06)
Meilleure solution
Sujet clos
Aller à