Vai a: [ Contenuti ] [ Categorie ] [ Cerca ]

Caricare javascript in modalità asincrona: 5 modi diversi

Caricare javascript in modalità asincrona: 5 modi diversi


Se abbiamo la necessità di inserire javascript da domini esterni al nostro sito può essere importante caricarli in modalità asincrona per evitare possibili SPOF.

Ecco 5 modi diversi di caricare un javascript in modalità asincrona, con o senza callback. Alcuni

Modalità in javascript senza l’ausilio di jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
function async_load(){
	var js 	= document.createElement('script');
	js.type 	= 'text/javascript';
	js.async 	= true;
	js.src 	= 'http://www.dominio.it/codice.js';
	js.onload 	= function(){ miacallback() };
	document.body.appendChild(js);
}
 
function miacallback() {
// codice callback
}
 
// compatibilità con IE < 8
window.attachEvent ? window.attachEvent('onload', async_load) : window.addEventListener('load', async_load, false);
</script>

Modalità in javascript senza l’ausilio di jQuery – versione 2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
var async_load_js = function (url,callback) {
 
	var js 	= document.createElement('script');
	js.type 	= 'text/javascript';
	js.async 	= 'true';
	js.src 	= url;
	js.onload 	= js.onreadystatechange = function(){
 
		var rs = this.readyState;
		if (rs && rs != 'complete' && rs != 'loaded') return;
		try { callback.apply() } catch (e) {}
	};
 
	document.body.appendChild(js);
};
 
function miacallback() {
// codice callback
}
 
async_load_js('http://www.dominio.it/codice.js', function(){ miacallback() });
</script>

A differenza del codice precedente ci troviamo davanti uno snippet un po’ più verboso ma con la possibilità di essere riutilizzato più volte nella stessa pagina attraverso la chiamata:

async_load_js('http://www.dominio.it/codice.js', function(){ miacallback() });

Modalità in javascript senza l’ausilio di jQuery – versione 3

1
2
3
4
5
6
7
8
<script>
var js 		= document.createElement('script');
js.type 	= 'text/javascript';
js.async 	= true;
js.src 		= 'http://www.dominio.it/codice.js';
var s 		= document.getElementsByTagName('head')[0];
s.parentNode.insertBefore(js, s);
</script>

Modalità che sfrutta jQuery

1
2
3
4
5
6
7
8
<script>
$.ajaxSetup({cache: "true"});
$.getScript('http://www.dominio.it/codice.js', function() { miacallback() });
 
function miacallback() {
// codice callback
}
</script>

L’istruzione riferita ad “ajaxSetup” è necessaria perchè di default jQuery imposta il javascript come non cachabile e quindi viene aggiunto un parametro random che invaliderà ogni forma di cache. Se non vi piace questo codice potere usare il prossimo codice, ovvero la modalità estesa della funzione “getScript”.

Modalità che sfrutta jQuery – versione 2

1
2
3
4
5
6
7
8
9
10
11
12
<script>
$.ajax({
	dataType: "script",
	cache: true,
	url: "http://www.dominio.it/codice.js",
	success: function(){ miacallback() }
});
 
function miacallback() {
// codice callback
}
</script>

Importante notare che, in base alle proprie preferenze, è possibile stampare il javascript asincrono in diversi punti della pagina usando questi diversi parametri:

  • document.body.appendChild(js);
  • var s = document.getElementsByTagName(’script’)[0]; s.parentNode.insertBefore(js, s);
  • var s = document.getElementsByTagName(’head’)[0]; s.parentNode.insertBefore(js, s);

link sponsorizzati

Consiglialo su Facebook

Lascia un Commento

Iscriviti alle discussione senza commentare

Torna: [ Inizio ] [ Contenuti ] [ Categorie ] [ Cerca ]

Pagina renderizzata in soli 0,602 secondi dopo aver eseguito ben 56 query. Wordpress... prestazioni da urlo!