jquery et chargement d'un fichier javascript js

**radjiv97441** · 16/01/2018, 17h06

Bonjour, suyr plusieurs de mes pages j'utilise giac.js, ce fichier permettant de faire du calcul formel (je ne connais pas d'autre) pèse plus de 7Mo.
je cherche une solution de charger une seule fois ce fichier et de plus j'aimerais le charger pour la première fois si l'utilisateur fait appel à un calcul formet via un bouton. Pour mon premier test (j'ai mis les fichier en pièce jointe), charger un fichier js en live , mais j'ai un bug: le site tourne en boucle indéfiniment après le premier write qui est juste.
voilà le code html demohtml.html :

Code HTML :

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
27
28
29
30
31
32
33
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>jQuery.getScript demo</title>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<script>
jQuery.cachedScript = function( urli, options ) {
 
  // Allow user to set any option except for dataType, cache, and url
  options = $.extend( options || {}, {
    dataType: "script",
    cache: true,
    url: urli
  });
 
  // Use $.ajax() since it is more flexible than $.getScript
  // Return the jqXHR object so we can chain callbacks
  return jQuery.ajax( options );
};
url="myload.js";
// Usage
$.cachedScript( url ).done(function( script, textStatus ) {
  document.write("chargement 1:"+loadvar())
});
document.write("chargement 2:"+ loadvar())
</script>
<script>
document.write("chargement 3:"+ loadvar())
</script>
</body>
</html>

et voila le code javascript myload.js:

Code :

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

1
2
3
4
5
6
var extvarfuny = "hello jy"
var i=0;
function loadvar() {
  i++;
  return i;
}

**NoSmoking** · 16/01/2018, 19h27

Bonjour,
document.write

lorsque le document est chargé cela écrase le contenu, utilise plutôt un oElem.textContent = message.

A lire :
Comprendre document.write() en JavaScript

**SpaceFrog** · 17/01/2018, 08h44

Un simple balise script et le navigateur qui gère la cache serra capable la seconde fois d'aller récupérer le script en cache ...

**radjiv97441** · 20/01/2018, 14h08

Bonjour j'ai pris en compte vos propositions, et les tests s'avèrent négatifs, je m'explique:

Voilà deux tests (voir fichier joints)
dans un fichier je charge giac.js (fichier distant) par la méthode courante de la balise script : la console charge pendant 10s
je clique sur le lien qui me renvois sur une autre page avec giac.js en demande, la console rechage environ 10s
donc la méthode n'utilise pas de cache par défaut

dans un autre fichier je charge giac.js avec jquery, le resultat est identique que précédement.
(j'ai essayé le test par téléphone sur mon serveur, à chaque navigation il faut attendre 1 à 2 min)

Ma question, comment mettre en cache sans rechargement complète de ce fichier ?
demo_giac_script1.html

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>jQuery.getScript demo</title>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://www-fourier.ujf-grenoble.fr/~parisse/giac/giac.js"></script>
</head>
<body>
  <p><a href="demo_giac_script2.html" target="_self">lien vers fichier demo_giac_script2.html</a></p>
</body>
</html>

demo_giac_script2.html

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>jQuery.getScript demo</title>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://www-fourier.ujf-grenoble.fr/~parisse/giac/giac.js"></script>
</head>
<body>
  <p><a href="demo_giac_script1.html" target="_self">lien vers fichier demo_giac_script1.html</a></p>
</body>
</html>

demo1html.html

Code HTML :

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
<body>
<p><a href="demo2html.html" target="_self">lien vers fichier demo1html.html</a></p>
<script>
jQuery.cachedScript = function( urli, options ) {
 
  // Allow user to set any option except for dataType, cache, and url
  options = $.extend( options || {}, {
    dataType: "script",
    cache: true,
    url: urli
  });
 
  // Use $.ajax() since it is more flexible than $.getScript
  // Return the jqXHR object so we can chain callbacks
  return jQuery.ajax( options );
};
url="https://www-fourier.ujf-grenoble.fr/~parisse/giac/giac.js";
// Usage
var debut = Date.now();
console.log("debut chargement")
$.cachedScript( url ).done(function( script, textStatus ) {
  console.log("fin chargement:"+ (Date.now()-debut))
});
</script>
</body>
</html>

demo2html.html

Code HTML :

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
27
28
29
30
31
32
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>jQuery.getScript demo</title>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>  
</head>
<body>
<p><a href="demo1html.html" target="_self">lien vers fichier demo1html.html</a></p>
<script>
jQuery.cachedScript = function( urli, options ) {
 
  // Allow user to set any option except for dataType, cache, and url
  options = $.extend( options || {}, {
    dataType: "script",
    cache: true,
    url: urli
  });
 
  // Use $.ajax() since it is more flexible than $.getScript
  // Return the jqXHR object so we can chain callbacks
  return jQuery.ajax( options );
};
url="https://www-fourier.ujf-grenoble.fr/~parisse/giac/giac.js";
// Usage
var debut = Date.now();
console.log("debut chargement")
$.cachedScript( url ).done(function( script, textStatus ) {
  console.log("fin chargement:"+ (Date.now()-debut))
});
</script>
</body>
</html>

**SpaceFrog** · 22/01/2018, 08h11

La conclusion est hâtive au vu du test effectué ...
Regarde plutôt en console dans l'onglet réseau, là tu verras si c'est le chargement de ton script qui ralentit le chargement de ta page

**radjiv97441** · 22/01/2018, 08h26

Bonjour, sur le teléphone je ne sais pas comment faire et sur mon pc ce matin c'est super rapide (fibre en qq secondes).
j'ai rajouté un lien vers une page identique sans giac, il y a une nette différence.
Avec la page giac sur téléphone, cela peut dépasser les minutes et c'est un problème (j'ai un forfait limité sur internet)
Je pense que je vais abandonner l'idée de mettre ce module (le cache n'est pas encore au point sur les scripts)

**SpaceFrog** · 22/01/2018, 09h20

Ha!
J'avais zappé le coté mobile...
A priori il faudrait passer par du local storage pour accélérer le processus
https://github.com/webpgr/cached-webpgr.js

**radjiv97441** · 22/01/2018, 19h40

Bonjour, merci pour la recherche. Je testerais par la suite, je fais une pause de programmation je dois faire mes cours et les corrections devoirs pour la rentrée des classes lundi prochain.

jquery et chargement d'un fichier javascript js

jQuery

Discussions similaires

Partager

Partager