Chargement conditionnel d'un script

**elm31rugby** · 29/11/2019, 11h25

Bonjour à tous et à toutes, je cherche à charger, en fonction de la taille de l'écran, un script js
(pour la petite histoire, je tourne sur la question depuis plusieurs heures, et je ne sais plus quoi faire...)
L'idée est de ne charger jquery que si l'on est sur un "grand écran", et de ne pas le charger si l'on est sur un petit écran.
Voici mon code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<script>
  var head = document.getElementsByTagName('head')[0];
  var js = document.createElement("script");
 
  js.type = "text/javascript";
 
  if (screen.width > 600)
  {
      js.src = "template/slippry/jquery-1.10.2.min.js";
  }
 
  head.appendChild(js);
  </script>

Sauf que... Il ne se passe rien. Je suis bien sur un écran de plus de 600 px, et mon jquerry n'est pas chargé.

Le code source de ma page est le suivant :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
...
<script>
  var head = document.getElementsByTagName('head')[0];
  var js = document.createElement("script");
  js.type = "text/javascript";
  if (screen.width > 600)
  {
      js.src = "http://127.0.0.1/Editions_bdp/template/slippry/jquery-1.10.2.min.js";
  }
  head.appendChild(js);
  </script>
<script src="template/slippry/slippry.min.js"></script>
</head>
<body>
...

C'est à dire que le script n'est pas interprété.

Je teste le site sur Firefox 70
Auriez-vous une petite idée ?
Merci et bonne journée !
Eric LM

**Beginner.** · 29/11/2019, 17h03

Salut,

Ben cela ne passe pas avec cette adresse, j'ai essayé avec js.src= "https://code.jquery.com/jquery-1.10.2.js"; et ça fonctionne...

Pour tester : https://jsbin.com/fociyihume/edit?html,output

**NoSmoking** · 29/11/2019, 17h14

Bonjour,

C'est à dire que le script n'est pas interprété.

ton code #1 me semble correct mais la question que l'on peut se poser est que comptes-tu en fait car hormis le charger c'est tout ce que cela fait.

Dans ton code #2 tu intègres le script src="template/slippry/slippry.min.js", dépend t-il de la présence ou non de jQuery ?

L'idée est de ne charger jquery que si l'on est sur un "grand écran

Je suis curieux de savoir pourquoi !?!

**elm31rugby** · 29/11/2019, 17h21

Bonjour et merci pour vos réponses.

Envoyé par NoSmoking

Dans ton code #2 tu intègres le script src="template/slippry/slippry.min.js", dépend t-il de la présence ou non de jQuery ?

Oui, tout à fait. Il s'agit d'un diaporama qui fonctionne sous JQuery

Envoyé par NoSmoking

Je suis curieux de savoir pourquoi !?!

En fait, je ne veux pas charger Jquery sur les petits écrans. (et je ne veux pas charger le diaporama non plus, mais je procède par étape)
Sur les petits ecrans, ikl n'y a pas la place pour faire défiler le diporama, donc je ne l'affiche pas. (ça, ça marche)
Mais dans ce cas, il est absurde de charger Jquery et le script du diaporama dont je n'ai as besoin.
D'où ma galère depuis ce matin...
Encore merci à vous. (mais pour l'instant, la solution proposée ne fonctionne pas chez moi)

On continue le combat !
Eric LM

**NoSmoking** · 29/11/2019, 17h31

(mais pour l'instant, la solution proposée ne fonctionne pas chez moi)

qu'est ce qui ne fonctionne pas, l'intégration de jQuery ou ton slide.

Regarde dans la console, touche F12, et tu pourras voir si ton fichier a bien été chargé.

**Beginner.** · 29/11/2019, 22h18

Envoyé par elm31rugby

Encore merci à vous. (mais pour l'instant, la solution proposée ne fonctionne pas chez moi)
On continue le combat !

Ben qu'est-ce qui ne fonctionne pas ? Ton code ou celui que j'ai posté ?

Ton code ne fonctionne pas chez moi non plus mais en fait ce n'est pas le code le problème, encore une fois c'est l'adresse :

Code javascript :

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

js.src = "http://127.0.0.1/Editions_bdp/template/slippry/jquery-1.10.2.min.js";

As-tu un serveur local ?

Essaye pour voir de tester le code que j'ai posté (et qui utilise une autre adresse)...
Pour vérifier utilise la console comme l'a suggéré NoSmoking...

**elm31rugby** · 30/11/2019, 10h37

Envoyé par Beginner.

Essaye pour voir de tester le code que j'ai posté (et qui utilise une autre adresse)...
Pour vérifier utilise la console comme l'a suggéré NoSmoking...

Oui, je vais continuer de tester vos deux propositions. J'ai déjà essayé avec un serveur distant, sans grand résultat, mais je vais approfondir cette idée.

Bonne journée !

Eric LM

**elm31rugby** · 04/12/2019, 11h31

Bonjour à tous, je reviens sur mon problème, juste pour faire le point avec vous :
1. Lorsque j'écris :

Code :

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

1
2
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="template/slippry/src/slippry.js"></script>

Mon slider se lance. Donc l'accès au Jquery distant fonctionne

2. Lorsque j'écris

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <script type="text/javascript">
 
     if (screen.width > 600)
     {
       var d = document,
          h = d.getElementsByTagName('head')[0],
          s = d.createElement('script');
           s.type = 'text/javascript';
           s.async = true;
           s.src = 'https://code.jquery.com/jquery-1.10.2.js';
           h.appendChild(s);
     }
 
  </script>

mon slider ne s'affiche pas, et la console me répond :

ReferenceError: jQuery is not defined

Surprenant, non ?

Bonne journée,

Eric LM

**NoSmoking** · 04/12/2019, 15h30

Surprenant, non ?

Non !!!!

Le chargement de tes fichiers JavaScript est asynchrone donc ton script est potentiellement pris en compte avant l'insertion de la bibliothèque jQuery.

Il te faut charger tous les fichiers ayant une dépendance et dans l'ordre de celle-ci et pas seulement jQuery.

Code :

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

1
2
3
if (screen.width > 600)  {
  // chargement des fichiers dépendant du précédent
}

Il ne te sert à rien de charger template/slippry/src/slippry.js si il n'est pas également utilisé.

Une façon de gérer cela est de rendre synchrone le chargement de test fichiers, quand le premier est chargé on charge le suivant et ainsi de suite.

Voici une façon de faire qui fonctionne depuis la « nuit des temps » ou presque :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
if (screen.width > 600) {
  // la liste des scripts à charger dans l'ordre
  const urlScripts = [
    "https://code.jquery.com/jquery-3.2.1.js",
    "http://slippry.com/assets/js/scripts.js",
    "ton-fichier-script.js"
  ];
  // ajout du script au document
  function loadScripts(tabUrls) {
    if (tabUrls.length) {
      const url = tabUrls.shift();
      const oScript = document.createElement("SCRIPT");
      oScript.type = "text/javascript";
      oScript.onload = function () {
        loadScripts(tabUrls);
      }
      oScript.src = url;
      document.head.appendChild(oScript);
    };
  }
  // lancement chargement
  loadScripts(urlScripts);
}

**Beginner.** · 04/12/2019, 20h04

Envoyé par elm31rugby

Mon slider se lance. Donc l'accès au Jquery distant fonctionne

Quand j'ai donné le lien en question c'était juste pour tester mais si tu veux utiliser cette solution autant charger la version minifiée...

Envoyé par NoSmoking

Voici une façon de faire qui fonctionne depuis la « nuit des temps » ou presque :

Code intéressant...

**elm31rugby** · 04/12/2019, 21h52

Merci à vous. Je commence à comprendre certaines choses. je teste cela demain, je n'ai pas eu le temps de le faire aujourd'hui.
Bonne soirée,
Eric LM

**elm31rugby** · 05/12/2019, 15h39

Bonjour, nouvel échec. Je laisse tomber. Le diaporama ne se charge pas.

Merci pour vos conseils, je vais essayer d'approfondir la question.

Dès que j'ai trouvé, je reviens vous le dire !

**NoSmoking** · 05/12/2019, 16h39

Envoyé par elm31rugby

nouvel échec. Je laisse tomber. Le diaporama ne se charge pas.

il n'y a pas de raison si tu as mis le code d'initialisation de ton « slider » dans la liste des fichiers à charger.

Envoyé par NoSmoking

Il te faut charger tous les fichiers ayant une dépendance et dans l'ordre de celle-ci et pas seulement jQuery.

donc ...

Code :

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

1
2
3
4
5
const urlScripts = [
  "https://code.jquery.com/jquery-3.2.1.js",
  "http://slippry.com/assets/js/scripts.js",
  "ton-fichier-script.js"                       // <<<<<<< donc ICI en dernier
];

**elm31rugby** · 06/12/2019, 10h36

Bon, ça y est, j'ai compris :
Il y a effectivement un script qui lance mon diaporama. J'ai mis ce script dans un fichier lance.js, que j'appelle en même temps que les autres. Cela me donne le code suivant :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
<script>
if (screen.width > 800) {
  // la liste des scripts à charger dans l'ordre
  const urlScripts = [
    "template/slippry/jquery-1.10.2.min.js",
    "template/slippry/src/slippry.js",
    "template/slippry/src/lance.js"
  ];
  // ajout du script au document
  function loadScripts(tabUrls) {
    if (tabUrls.length) {
      const url = tabUrls.shift();
      const oScript = document.createElement("SCRIPT");
      oScript.type = "text/javascript";
      oScript.onload = function () {
        loadScripts(tabUrls);
      }
      oScript.src = url;
      document.head.appendChild(oScript);
    };
  }
  // lancement chargement
  loadScripts(urlScripts);
}
</script>

Ensuite, il faut que je reste avec un Jquery 1.10, manifestement mon diaporama ne fonctionne pas avec un Jquery plus récent
Et je préfère appeler un Jquery que j'héberge, je pense que le chargement est plus rapide que d'aller chercher un Jquery en ligne

Merci pour tout. Je n'ai pas encore tout bien compris de cette histoire de chargement synchrone et asynchrone, je vais bosser la question.

Sincèrement, merci pour le coup de main !

Eric LM

Il me reste encore quelques optimisations à mettre en place pour accélérer le chargement des pages, mais je ne suis plus très loin

**NoSmoking** · 10/12/2019, 10h26

Dans le cas où tu héberges tous les fichiers tu pourrais tout à fait concaténer ceux-ci dans un seul et même fichier.

**elm31rugby** · 10/12/2019, 10h30

Effectivement. Cela pourrait peut-être encore accélérer l'affichage des pages. Merci !

Chargement conditionnel d'un script

JavaScript

Discussions similaires

Partager

Partager