charger des scripts de manière asynchrone
J'utilise plusieurs plugins, widgets personnalisés et autres bibliothèques de JQuery. Par conséquent, j'ai plusieurs fichiers .js et .css. Je dois créer un chargeur pour mon site car le chargement prend un certain temps. ce sera bien si je peux afficher le chargeur avant d'importer tous les:
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/myFunctions.js"></script>
<link type="text/css" href="css/main.css" rel="stylesheet" />
...
....
etc
J'ai trouvé plusieurs tutoriels qui me permettent d'importer une bibliothèque JavaScript de manière asynchrone. Par exemple, je peux faire quelque chose comme:
(function () {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'js/jquery-ui-1.8.16.custom.min.js';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
})();
pour une raison quelconque, lorsque je fais la même chose pour tous mes fichiers, les pages ne fonctionnent pas. Cela fait si longtemps que j'essaie de trouver le problème, mais je ne le trouve pas. J'ai d'abord pensé que c'était probablement parce que certaines fonctions javascript dépendaient des autres. mais je les ai chargés dans le bon ordre en utilisant la fonction time-out quand on a terminé, je suis passé au suivant et la page se comporte toujours de manière étrange. Par exemple, je ne peux pas cliquer sur les liens, etc. Les animations fonctionnent toujours.
Quoi qu'il en soit
Voici ce que je pensais ... Je crois que les navigateurs ont un cache, ce qui explique le temps nécessaire au chargement de la page pour la première fois et la prochaine fois que le téléchargement est rapide. donc ce que je pense faire est de remplacer ma page index.html par une page qui charge tous ces fichiers de manière asynchrone. Quand Ajax est terminé, tous ces fichiers sont redirigés vers la page que je prévois d’utiliser. lors de l'utilisation de cette page, le chargement ne devrait pas être long, car les fichiers devraient déjà être inclus dans la mémoire cache du navigateur. sur ma page d'index (page où les fichiers .js et .css sont chargés de manière asynchrone), je ne me soucie pas des erreurs. Je vais simplement afficher un chargeur et rediriger la page une fois terminé ...
Cette idée est-elle une bonne alternative? ou devrais-je continuer à essayer d'implémenter les méthodes asynchrones?
MODIFIER
la façon dont je charge tout ce qui est async ressemble à ceci:
importScripts();
function importScripts()
{
//import: jquery-ui-1.8.16.custom.min.js
getContent("js/jquery-1.6.2.min.js",function (code) {
var s = document.createElement('script');
s.type = 'text/javascript';
//s.async = true;
s.innerHTML=code;
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
setTimeout(insertNext1,1);
});
//import: jquery-ui-1.8.16.custom.min.js
function insertNext1()
{
getContent("js/jquery-ui-1.8.16.custom.min.js",function (code) {
var s = document.createElement('script');
s.type = 'text/javascript';
s.innerHTML=code;
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
setTimeout(insertNext2,1);
});
}
//import: jquery-ui-1.8.16.custom.css
function insertNext2()
{
getContent("css/custom-theme/jquery-ui-1.8.16.custom.css",function (code) {
var s = document.createElement('link');
s.type = 'text/css';
s.rel ="stylesheet";
s.innerHTML=code;
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
setTimeout(insertNext3,1);
});
}
//import: main.css
function insertNext3()
{
getContent("css/main.css",function (code) {
var s = document.createElement('link');
s.type = 'text/css';
s.rel ="stylesheet";
s.innerHTML=code;
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
setTimeout(insertNext4,1);
});
}
//import: jquery.imgpreload.min.js
function insertNext4()
{
getContent("js/farinspace/jquery.imgpreload.min.js",function (code) {
var s = document.createElement('script');
s.type = 'text/javascript';
s.innerHTML=code;
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
setTimeout(insertNext5,1);
});
}
//import: Marquee.js
function insertNext5()
{
getContent("js/Marquee.js",function (code) {
var s = document.createElement('script');
s.type = 'text/javascript';
s.innerHTML=code;
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
setTimeout(insertNext6,1);
});
}
//import: Marquee.css
function insertNext6()
{
getContent("css/Marquee.css",function (code) {
var s = document.createElement('link');
s.type = 'text/css';
s.rel ="stylesheet";
s.innerHTML=code;
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
setTimeout(insertNext,1);
});
}
function insertNext()
{
setTimeout(pageReadyMan,10);
}
}
// get the content of url and pass that content to specified function
function getContent( url, callBackFunction )
{
// attempt to create the XMLHttpRequest and make the request
try
{
var asyncRequest; // variable to hold XMLHttpRequest object
asyncRequest = new XMLHttpRequest(); // create request object
// register event handler
asyncRequest.onreadystatechange = function(){
stateChange(asyncRequest, callBackFunction);
}
asyncRequest.open( 'GET', url, true ); // prepare the request
asyncRequest.send( null ); // send the request
} // end try
catch ( exception )
{
alert( 'Request failed.' );
} // end catch
} // end function getContent
// call function whith content when ready
function stateChange(asyncRequest, callBackFunction)
{
if ( asyncRequest.readyState == 4 && asyncRequest.status == 200 )
{
callBackFunction(asyncRequest.responseText);
} // end if
} // end function stateChange
et la partie étrange est que tout le travail du style, plus toutes les fonctions javascript. la page est gelée pour une raison quelconque si ...
Quelques solutions pour le chargement asynchrone:
//this function will work cross-browser for loading scripts asynchronously
function loadScript(src, callback)
{
var s,
r,
t;
r = false;
s = document.createElement('script');
s.type = 'text/javascript';
s.src = src;
s.onload = s.onreadystatechange = function() {
//console.log( this.readyState ); //uncomment this line to see which ready states are called.
if ( !r && (!this.readyState || this.readyState == 'complete') )
{
r = true;
callback();
}
};
t = document.getElementsByTagName('script')[0];
t.parentNode.insertBefore(s, t);
}
Si vous avez déjà jQuery sur la page, utilisez simplement:
$.getScript(url, successCallback) *
En outre, il est possible que vos scripts soient chargés/exécutés avant le chargement du document, ce qui signifie que vous devez attendre document.ready avant de pouvoir lier des événements aux éléments.
Il n'est pas possible de dire précisément quel est votre problème sans voir le code.
La solution la plus simple consiste à conserver tous vos scripts en ligne au bas de la page afin qu'ils ne bloquent pas le chargement du contenu HTML pendant leur exécution. Cela évite également d'avoir à charger de manière asynchrone chaque script requis.
Si vous avez une interaction particulièrement sophistiquée qui n’est pas toujours utilisée et qui nécessite un script plus volumineux, il peut être utile d’éviter de charger ce script particulier tant qu’il n’est pas nécessaire (chargement différé).
* les scripts chargés avec $.getScript ne seront probablement pas mis en cache
Pour tous ceux qui peuvent utiliser des fonctionnalités modernes telles que l'objet Promise , la fonction loadScript est devenue beaucoup plus simple:
function loadScript(src) {
return new Promise(function (resolve, reject) {
var s;
s = document.createElement('script');
s.src = src;
s.onload = resolve;
s.onerror = reject;
document.head.appendChild(s);
});
}
Sachez que cette version n'accepte plus d'argument callback car la promesse retournée gérera le rappel. Ce qui auparavant aurait été loadScript(src, callback) serait maintenant loadScript(src).then(callback).
Cela a l'avantage supplémentaire de pouvoir détecter et gérer les pannes, par exemple, on pourrait appeler ...
loadScript(cdnSource)
.catch(loadScript.bind(null, localSource))
.then(successCallback, failureCallback);
... et il gérerait les pannes de CDN avec élégance.
Le nouvel attribut "async" de HTML5 est censé faire l'affaire. "différer" est également pris en charge par la plupart des navigateurs si vous vous souciez de IE.
async - Le HTML
<script async src="siteScript.js" onload="myInit()"></script>
reporter - le HTML
<script defer src="siteScript.js" onload="myInit()"></script>
Lors de l’analyse du nouveau code d’unité d’annonce adsense, j’ai remarqué l’attribut; une recherche m’a amené ici: http://davidwalsh.name/html5-async
J'ai chargé les scripts de manière asynchrone (le HTML 5 a cette fonctionnalité) lorsque tous les scripts ont été chargés, j'ai redirigé la page vers index2.html, où index2.html utilise les mêmes bibliothèques. Étant donné que les navigateurs ont un cache une fois que la page a été redirigée vers index2.html, index2.html se charge en moins d’une seconde, car il possède tout ce dont il a besoin pour charger la page. Dans ma page index.html, je charge également les images que je prévois d'utiliser pour que le navigateur les place dans la mémoire cache. donc mon index.html ressemble à:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Project Management</title>
<!-- the purpose of this page is to load all the scripts on the browsers cache so that pages can load fast from now on -->
<script type="text/javascript">
function stylesheet(url) {
var s = document.createElement('link');
s.type = 'text/css';
s.async = true;
s.src = url;
var x = document.getElementsByTagName('head')[0];
x.appendChild(s);
}
function script(url) {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = url;
var x = document.getElementsByTagName('head')[0];
x.appendChild(s);
}
//load scritps to the catche of browser
(function () {
stylesheet('css/custom-theme/jquery-ui-1.8.16.custom.css');
stylesheet('css/main.css');
stylesheet('css/Marquee.css');
stylesheet('css/mainTable.css');
script('js/jquery-ui-1.8.16.custom.min.js');
script('js/jquery-1.6.2.min.js');
script('js/myFunctions.js');
script('js/farinspace/jquery.imgpreload.min.js');
script('js/Marquee.js');
})();
</script>
<script type="text/javascript">
// once the page is loaded go to index2.html
window.onload = function () {
document.location = "index2.html";
}
</script>
</head>
<body>
<div id="cover" style="position:fixed; left:0px; top:0px; width:100%; height:100%; background-color:Black; z-index:100;">Loading</div>
<img src="images/home/background.png" />
<img src="images/home/3.png"/>
<img src="images/home/6.jpg"/>
<img src="images/home/4.png"/>
<img src="images/home/5.png"/>
<img src="images/home/8.jpg"/>
<img src="images/home/9.jpg"/>
<img src="images/logo.png"/>
<img src="images/logo.png"/>
<img src="images/theme/contentBorder.png"/>
</body>
</html>
une autre bonne chose à propos de cela est que je peux placer un chargeur dans la page et lorsque la page sera terminée, le chargeur disparaîtra et la nouvelle page sera exécutée dans un délai de quelques millisecondes.
Exemple de google
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js?onload=onLoadCallback';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
Plusieurs notes:
s.async = truen'est pas très correct pour le doctype HTML5, correct ests.async = 'async'(en fait, utilisertrueest correct, grâce à amn qui l'a signalé dans le commentaire juste en dessous)- Utiliser des délais d'attente pour contrôler l'ordre n'est pas très bon et sûr, et vous augmentez également le temps de chargement, pour qu'il soit égal à la somme de tous les délais!
Puisqu'il existe une raison récente de charger des fichiers de manière asynchrone, mais dans l'ordre, je vous recommanderais un peu plus fonctionnel par rapport à votre exemple (remove console.log pour une utilisation en production :)):
(function() {
var prot = ("https:"===document.location.protocol?"https://":"http://");
var scripts = [
"path/to/first.js",
"path/to/second.js",
"path/to/third.js"
];
function completed() { console.log('completed'); } // FIXME: remove logs
function checkStateAndCall(path, callback) {
var _success = false;
return function() {
if (!_success && (!this.readyState || (this.readyState == 'complete'))) {
_success = true;
console.log(path, 'is ready'); // FIXME: remove logs
callback();
}
};
}
function asyncLoadScripts(files) {
function loadNext() { // chain element
if (!files.length) completed();
var path = files.shift();
var scriptElm = document.createElement('script');
scriptElm.type = 'text/javascript';
scriptElm.async = true;
scriptElm.src = prot+path;
scriptElm.onload = scriptElm.onreadystatechange = \
checkStateAndCall(path, loadNext); // load next file in chain when
// this one will be ready
var headElm = document.head || document.getElementsByTagName('head')[0];
headElm.appendChild(scriptElm);
}
loadNext(); // start a chain
}
asyncLoadScripts(scripts);
})();
Grâce à HTML5, vous pouvez maintenant déclarer les scripts que vous souhaitez charger de manière asynchrone en ajoutant "async" dans la balise:
<script async>...</script>
Remarque: L'attribut async ne concerne que les scripts externes (et ne doit être utilisé que si l'attribut src est présent).
Remarque: un script externe peut être exécuté de plusieurs manières:
- Si async est présent: le script est exécuté de manière asynchrone avec le reste de la page (le script sera exécuté tant que la page poursuivra l'analyse)
- Si async n'est pas présent et que différer est présent: le script est exécuté lorsque l'analyse de la page est terminée
- Si ni asynchrone ni différé n'est présent: le script est récupéré et exécuté immédiatement, avant que le navigateur ne poursuive l'analyse de la page
Voir ceci: http://www.w3schools.com/tags/att_script_async.asp
Voici une excellente solution contemporaine au chargement de script asynchrone, bien qu’il s’adresse uniquement au script js avec async false.
Il existe un excellent article écrit dans www.html5rocks.com - Plongez dans les eaux troubles du chargement du script .
Après avoir examiné de nombreuses solutions possibles, l'auteur a conclu que l'ajout de scripts js à l'élément de fin de corps était le meilleur moyen d'éviter de bloquer le rendu de la page à l'aide de scripts js.
Dans l’intervalle, l’auteur a ajouté une autre bonne solution de rechange pour les personnes désirant désespérément charger et exécuter des scripts de manière asynchrone.
Considérant que vous avez quatre scripts nommés script1.js, script2.js, script3.js, script4.js, vous pouvez le faire avec apply async = false:
[
'script1.js',
'script2.js',
'script3.js',
'script4.js'
].forEach(function(src) {
var script = document.createElement('script');
script.src = src;
script.async = false;
document.head.appendChild(script);
});
Maintenant, Spec dit: Télécharger ensemble, exécuter dans l’ordre dès que tous les téléchargements sont terminés.
Firefox <3.6, Opera déclare: Je ne sais pas du tout ce qu’est cette chose «async», mais j’exécute les scripts ajoutés via JS dans l’ordre dans lequel ils ont été ajoutés.
Safari 5.0 dit: Je comprends «async», mais je ne comprends pas le paramétrer sur «faux» avec JS. J'exécuterai vos scripts dès qu'ils atterriront, dans n'importe quel ordre.
IE <10 dit: Aucune idée sur “async”, mais il existe une solution de contournement utilisant “onreadystatechange”.
Tout le reste dit: Je suis votre ami, nous allons le faire dans les règles.
Maintenant, le code complet avec IE <10 Solution de contournement:
var scripts = [
'script1.js',
'script2.js',
'script3.js',
'script4.js'
];
var src;
var script;
var pendingScripts = [];
var firstScript = document.scripts[0];
// Watch scripts load in IE
function stateChange() {
// Execute as many scripts in order as we can
var pendingScript;
while (pendingScripts[0] && ( pendingScripts[0].readyState == 'loaded' || pendingScripts[0].readyState == 'complete' ) ) {
pendingScript = pendingScripts.shift();
// avoid future loading events from this script (eg, if src changes)
pendingScript.onreadystatechange = null;
// can't just appendChild, old IE bug if element isn't closed
firstScript.parentNode.insertBefore(pendingScript, firstScript);
}
}
// loop through our script urls
while (src = scripts.shift()) {
if ('async' in firstScript) { // modern browsers
script = document.createElement('script');
script.async = false;
script.src = src;
document.head.appendChild(script);
}
else if (firstScript.readyState) { // IE<10
// create a script and add it to our todo pile
script = document.createElement('script');
pendingScripts.Push(script);
// listen for state changes
script.onreadystatechange = stateChange;
// must set src AFTER adding onreadystatechange listener
// else we’ll miss the loaded event for cached scripts
script.src = src;
}
else { // fall back to defer
document.write('<script src="' + src + '" defer></'+'script>');
}
}
Je compléterais la réponse de zzzzBov en vérifiant la présence d'un rappel et en permettant de passer des arguments:
function loadScript(src, callback, args) {
var s, r, t;
r = false;
s = document.createElement('script');
s.type = 'text/javascript';
s.src = src;
if (typeof(callback) === 'function') {
s.onload = s.onreadystatechange = function() {
if (!r && (!this.readyState || this.readyState === 'complete')) {
r = true;
callback.apply(args);
}
};
};
t = document.getElementsByTagName('script')[0];
t.parent.insertBefore(s, t);
}
Je vous suggère de regarder Modernizr . C'est une petite bibliothèque légère que vous pouvez charger de manière asynchrone votre javascript avec des fonctionnalités vous permettant de vérifier si le fichier est chargé et d'exécuter le script dans l'autre que vous spécifiez.
Voici un exemple de chargement de jquery:
Modernizr.load([
{
load: '//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js',
complete: function () {
if ( !window.jQuery ) {
Modernizr.load('js/libs/jquery-1.6.1.min.js');
}
}
},
{
// This will wait for the fallback to load and
// execute if it needs to.
load: 'needs-jQuery.js'
}
]);
Vous pourriez trouver cet article wiki intéressant: http://ajaxpatterns.org/On-Demand_Javascript
Il explique comment et quand utiliser une telle technique.
J'ai écrit un petit post pour aider avec ceci, vous pouvez lire plus ici https://timber.io/snippets/asynchronously-load-a-script-in-the-browser-with-javascript/ J'ai attaché la classe d'assistance ci-dessous. Il attendra automatiquement qu'un script se charge et renverra un attribut de fenêtre spécifié une fois que ce sera fait.
export default class ScriptLoader {
constructor (options) {
const { src, global, protocol = document.location.protocol } = options
this.src = src
this.global = global
this.protocol = protocol
this.isLoaded = false
}
loadScript () {
return new Promise((resolve, reject) => {
// Create script element and set attributes
const script = document.createElement('script')
script.type = 'text/javascript'
script.async = true
script.src = `${this.protocol}//${this.src}`
// Append the script to the DOM
const el = document.getElementsByTagName('script')[0]
el.parentNode.insertBefore(script, el)
// Resolve the promise once the script is loaded
script.addEventListener('load', () => {
this.isLoaded = true
resolve(script)
})
// Catch any errors while loading the script
script.addEventListener('error', () => {
reject(new Error(`${this.src} failed to load.`))
})
})
}
load () {
return new Promise(async (resolve, reject) => {
if (!this.isLoaded) {
try {
await this.loadScript()
resolve(window[this.global])
} catch (e) {
reject(e)
}
} else {
resolve(window[this.global])
}
})
}
}
L'utilisation est comme ceci:
const loader = new Loader({
src: 'cdn.segment.com/analytics.js',
global: 'Segment',
})
// scriptToLoad will now be a reference to `window.Segment`
const scriptToLoad = await loader.load()
Une des raisons pour lesquelles vos scripts pourraient se charger si lentement est si vous exécutez tous vos scripts pendant le chargement de la page, comme ceci:
callMyFunctions();
au lieu de:
$(window).load(function() {
callMyFunctions();
});
Ce second bit de script attend que le navigateur ait complètement chargé tout votre code Javascript avant de commencer à exécuter l'un de vos scripts, ce qui indique à l'utilisateur que la page s'est chargée plus rapidement.
Si vous cherchez à améliorer l'expérience de l'utilisateur en réduisant le temps de chargement, je ne choisirais pas l'option "écran de chargement". À mon avis, ce serait beaucoup plus agaçant que de simplement charger la page plus lentement.
Voici un peu de fonction ES6 si quelqu'un veut l'utiliser dans React par exemple
import {uniqueId} from 'lodash' // optional
/**
* @param {String} file The path of the file you want to load.
* @param {Function} callback (optional) The function to call when the script loads.
* @param {String} id (optional) The unique id of the file you want to load.
*/
export const loadAsyncScript = (file, callback, id) => {
const d = document
if (!id) { id = uniqueId('async_script') } // optional
if (!d.getElementById(id)) {
const tag = 'script'
let newScript = d.createElement(tag)
let firstScript = d.getElementsByTagName(tag)[0]
newScript.id = id
newScript.async = true
newScript.src = file
if (callback) {
// IE support
newScript.onreadystatechange = () => {
if (newScript.readyState === 'loaded' || newScript.readyState === 'complete') {
newScript.onreadystatechange = null
callback(file)
}
}
// Other (non-IE) browsers support
newScript.onload = () => {
callback(file)
}
}
firstScript.parentNode.insertBefore(newScript, firstScript)
} else {
console.error(`The script with id ${id} is already loaded`)
}
}Voici ma solution personnalisée pour éliminer le JavaScript bloquant le rendu:
// put all your JS files here, in correct order
const libs = {
"jquery": "https://code.jquery.com/jquery-2.1.4.min.js",
"bxSlider": "https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js",
"angular": "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js",
"ngAnimate": "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular-animate.min.js"
}
const loadedLibs = {}
let counter = 0
const loadAsync = function(lib) {
var http = new XMLHttpRequest()
http.open("GET", libs[lib], true)
http.onload = () => {
loadedLibs[lib] = http.responseText
if (++counter == Object.keys(libs).length) startScripts()
}
http.send()
}
const startScripts = function() {
for (var lib in libs) eval(loadedLibs[lib])
console.log("allLoaded")
}
for (var lib in libs) loadAsync(lib)
En bref, il charge tous vos scripts de manière asynchrone, puis les exécute en conséquence.
Github repo: https://github.com/mudroljub/js-async-loader
Découvrez ceci https://github.com/stephen-lazarionok/async-resource-loader . Il contient un exemple qui montre comment charger JS, CSS et plusieurs fichiers en un coup.
x.parentNode renvoie l'élément HEAD, de sorte que vous insérez le script juste avant la balise head. Peut-être que c'est le problème.
Essayez x.parentNode.appendChild() à la place.
Avez-vous envisagé d'utiliser Fetch Injection? J'ai lancé une bibliothèque open source appelée fetch-inject pour traiter de tels cas. Voici à quoi votre chargeur pourrait ressembler en utilisant la bibliothèque:
fetcInject([
'js/jquery-1.6.2.min.js',
'js/Marquee.js',
'css/Marquee.css',
'css/custom-theme/jquery-ui-1.8.16.custom.css',
'css/main.css'
]).then(() => {
'js/jquery-ui-1.8.16.custom.min.js',
'js/farinspace/jquery.imgpreload.min.js'
})
Pour assurer la compatibilité ascendante, utilisez la détection de fonctionnalités et le recours à XHR Injection ou Script DOM Elements, ou insérez simplement les balises dans la page à l'aide de document.write.