11485 sujets

JavaScript, DOM et API Web HTML5

Bonsoir,

Je déplace une div avec un petit script au moyen d'un body onload :

<script type="text/javascript">
   
    function deplacementcategories() {

        var categories = document.getElementsByClassName("vc_custom_1599931850047")[0];
        document.getElementsByClassName("container-categories")[0].appendChild(categories);

    };


Inconvénient : la fonction s'exécute après le chargement des images et du CSS.

J'ai tenté de la déclencher avec :
document.addEventListener("DOMContentLoaded", deplacementcategorie);


Le déplacement a bien lieu et il est invisible pour l'utilisateur. Mais mystérieusement, après 1 ou 2 secondes, la div disparaît...
Auriez-vous une explication ? Merci d'avance Smiley smile
Modérateur
Bonjour,

L'explication ne peut pas être découverte rien qu'avec ce code.

Il en faudrait plus.

Amicalement,
Modérateur
Bonjour,

On progresse. Etape suivante : "où faut-il regarder et c'est quelle image qui disparait ?" Smiley smile

Amicalement,
Je déclenche la fonction avec
<body onload="deplacementcategories()">
. La div ne disparaît pas, mais le déplacement se fait après le chargement de la page, ce qui n'est pas souhaitable.

C'est lorsque je déclenche la fonction avec :
document.addEventListener("DOMContentLoaded", deplacementcategorie);

qu'elle disparait au bout de 2 secondes
Modérateur
Bonjour,

1) Au début je ne comprenais pas de quoi il s'agissait et puis j'ai fini par voir que ta page mettait plus de 2 minutes à charger chez moi. Et qu'il fallait donc que j'attende 2 minutes pour voir le déplacement. Il se trouve que demain, on vient installer (enfin) la fibre chez moi, du coup je vais pouvoir comparer ! Smiley lol lol]lol]

Evidemment, si on recharge la page, ça va un peu plus vite, mais ça reste horriblement lent.

Et à ta place, c'est plutôt ça qui m'inquiéterait, cette lenteur épouvantable pour certains internautes, plutôt que le moment où le déplacement (à peu près inutile) de "la div" s'effectue.

2) J'imagine qu'il s'agit bien de "cette div" (celle qui est au départ en dessous de la vidéo du guitariste en haut de page, et qui passe ensuite au dessus de cette vidéo du guitariste). J'ai mis plus d'un quart d'heure à essayer de trouver de quelle "div" tu parlais.

Il faut dire aussi que je ne suis pas très doué avec les ordis.

3) J'ai passé plusieurs minutes supplémentaires à commencer à rédiger cette réponse. Mais quand je suis retourné à l'onglet dans lequel j'avais affiché ta page, j'ai constaté que bien que le déplacement ait été fait via un onload="deplacementcategories()" (attribut du <body>), "la <div>" avait quand même disparue.

Elle exagère !

4) J'ai donc recommencé depuis le début et j'ai constaté que c'était lorsque j'affichais l'inspecteur du navigateur que "la <div>" disparaissait et que même si je fermais l'inspecteur, elle restait disparue.

5) J'ai donc recommencé depuis le début et j'ai constaté que c'était quand je réduisais (légèrement) la largeur de la fenêtre que "la <div>" disparaissait pour ne jamais réapparaitre. Et fait, si on vérifie avec l'inspecteur, on voit qu'elle a alors une nouvelle classe "vc_hidden", qu'elle n'avait pas au départ !

J'ai vérifié plus tard qu'en fait, ça se produit aussi si on augmente la largeur.

6) Il y a donc quelque part un script qui dès qu'on touche aux dimensions de la fenêtre donne à cette div la classe "vc_hidden". Et quand je vois le nom de cette classe, sans même essayer d'aller voir exactement où c'est dans le code, j'imagine très bien ce qu'elle peut avoir comme effet : elle cache "la div". Smiley lol Smiley lol Smiley lol

Par contre, comme ta page (qui au passage me semble très bien du point de vue du contenu et du design, c'est à souligner) contient 1012 scripts faisant 2 millions de lignes de code (dont un paquet sont minifiées et donc quasi illisibles), 353242 balises, avec chacune une dizaine de classes, il est assez difficile, sans avoir la totalité du code en local, et d'y passer beaucoup de temps, de trouver où se trouve la ligne fautive. Et même après ça, on ne saura sans doute toujours pas quoi faire, sans avoir suivi tout ce que tu as fais depuis toutes ces années que tu peaufines ton site.

7) Tout ça c'est bien joli, mais il faudrait avancer.

Tu peux essayer de trouver la ligne en question (c'est une ligne qui contient très probablement "vc_hidden", et qui est dans du code javascript), et essayer de voir si tu peux éviter qu'elle cache "la div"., d'une manière ou d'une autre.

Je n'ai pas mieux pour l'instant à te proposer.

Amicalement,
Modifié par parsimonhi (11 Oct 2020 - 19:38)
Merci de ton aide précieuse !

Effectivement, il y aura une gros travail d'optimisation de notre code à réaliser.
En attendant, bravo ! Tu as mis le doigt sur ce qui masque la div.
Ce qui est plus étonnant, c'est la différence de comportement suivant la méthode de déclenchement de la fonction...
Petite piste pour aider:

body onload --> overwhrite tous les autres onload !! à éviter, surtout avec un code pas du tout optimisé ...

addeventlistener DOMContentLoaded --> Ajoute un onload, à préférer, ça n'écrase rien !

Sinon, je ne vois pas l’intérêt de charger tous les CDN existants sur terre et tous ces CSS pour une simple page, y'a rien de spécial, aucune appli, juste une simple page ...
Faut réfléchir à optimiser et pourquoi pas de repartir from scratch à une solution light pour charger UNIQUEMENT ce qui est utile !!
Par exemple coder un petit JS tout simple pour remplacer tous les CDN existants ne serait pas du luxe !
Et là les CSS ça doit se mélanger dans tous les sens de ce que je vois.

Sinon au bout de 2mn de chargement la page est sympa Smiley langue
Sauf que personne n'attend 2mn, du coup c'est dommage !
Quelques notions de SEO te seraient utile !

Un coup d'oeil par ici devrait te donner des idées --> https://fr.semrush.com/blog/conseils-pour-optimiser-performance-site-internet/

Et sinon quand on test ta page on obtient un poids de 19Mo avec une fin de chargement en 32s, je te laisse deviner si l'utilisateur va quitter avant ...
Bonsoir Stryk,

Merci beaucoup pour tes conseils d'optimisation et c'est noté : le onload est à bannir.
Je suis entièrement d'accord avec toi, c'est beaucoup trop lourd et pas du tout user friendly.
On va travailler là-dessus pour charger rapidement les pages.
Bonne soirée,