jquery et chargement d'un fichier javascript js

Version imprimable

2 pièce(s) jointe(s)

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:

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:

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

16/01/2018, 19h27
NoSmoking

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

A lire :
Comprendre document.write() en JavaScript
17/01/2018, 08h44
SpaceFrog

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 ...

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:

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:

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:

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:

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>

22/01/2018, 08h11
SpaceFrog

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
22/01/2018, 08h26
radjiv97441

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)
22/01/2018, 09h20
SpaceFrog

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
22/01/2018, 19h40
radjiv97441

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.