Discussion :

[sansblog]

Bonjour à tous.

Je ne trouve pas comment attendre la fin du chargement d'une page pour exécuter un fichier .js situé sur mon site.

Dans ma page php, il y a en milieu de page le code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<?php printCodeblock(1); ?>

Dans l'éditeur admin du CMS, je met par exemple le code suivant dans la section codeblock 1 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<script>
var pics = ["/3/tramont-s/S_IMG_4470.jpg"];
var nRet = 1;
</script>
<script src="/3/zph.js"></script>

Et ça fonctionne bien sur Pc sous Windows, Macos, Linux, et sous Firefox, Edge, Google-chrome et Safari !

Mais ça ne fonctionne pas sur smartphone : je n'ai à l'écran que le contenu de la photo traitée par le code zph.js, sans le template tout autour de la page php.
Sur smartphone, depuis depuis Firefox ou Google Chrome, je dois rafraichir la page (je recharge la page) et là, elle s'affiche intégralement, avec le templatel ET la photo traitée par zph.js au bon endroit.

D'ou ma question : comment retarder l'exécution du fichier js dans mon codeblock depuis mon CMS pour que la page s'affiche intégralement du 1er coup ?

Merci d'avance.

[CosmoKnacki]

La réponse se trouve sur cette page. Tu dois encapsuler le code javascript dans un gestionnaire d'événements comme l'exemple de cette page le montre (à toi de voir quel est l'événement le mieux approprié à ta situation entre l'événement DOMContentLoaded qui se déclenche lorsque le html est entièrement chargé et l'événement load qui lui se déclenche lorsque tout a été chargé: html, css, images, script, etc.).
Comme le code que tu veux "retarder" est dans un fichier (zph.js), tu as deux possibilités:

• soit tu édites directement ce fichier pour l'encapsuler dans le gestionnaire d'événement.
• soit tu laisses le fichier tel quel, mais tu le charges dynamiquement en remplaçant:

  Code :

  Sélectionner tout - Visualiser dans une fenêtre à part

  <script src="/3/zph.js"></script>

  par

  Code :

  Sélectionner tout - Visualiser dans une fenêtre à part

  1
  2
  3
  const script = document.createElement('script');
  script.src = '/3/zph.js';
  document.head.append(script);

  Il est alors simple de placer ce code dans le gestionnaire d'événements.

[sansblog]

Merci KosmoKnacki.

Il m'a fallu un peu de temps pour mettre le code en place.
Mais le problème n'a pas été réglé.

J'ai cherché à comprendre : le souci venait d'un template officiel du CMS.
J'ai donc remplacé mon template "mobile" par un autre template "mobile" et le problème a disparu.

Ce qui m'a mis sur la bonne voie après essais "DOMContentLoaded" est que mon template pour Pc fonctionne sans souci sur mon smartphone en mode pc !