Carica script jQuery Mobile in modo asincrono?

Question

Qualcuno ha provato a implementare il caricamento di jQuery Mobile con gli script di accompagnamento in modo asincrono con l'aiuto di head.js o utilizzando un altro metodo? Lo sto sperimentando proprio adesso, e mentre dà un enorme incremento di prestazioni, sembra che interrompa la navigazione (in particolare la gestione degli eventi con errori). Quindi mi chiedo se qualcuno può condividere la sua esperienza con esso.

UPDATE: il problema con l'evento hashchanged è stato causato da un altro componente. Quindi implementa il caricamento asincrono di jQM e altre risorse JavaScript, è sicuro e migliora enormemente i tempi di caricamento e le prestazioni della tua app JS. Io uso head.js per farlo, puoi usare quello che funziona meglio per te.

Answer 1

utilizza l'attributo Async quando si carica lo script java sulla pagina. ma questo supporta solo nel browser moderno (HTML5) per dettagli consultare questo link

http://www.w3schools.com/tags/att_script_async.asp

Answer 2

Questo è esattamente ciò che un pacchetto come RequireJS è per. L'utilizzo di un caricatore di moduli come RequireJS consente di caricare in modo asincrono più file JS e definire i callback per il caricamento dei file.

Ecco un semplice esempio ...

Invece di caricare i vostri, e o altri file di jQuery/JS, l'unico <script> per caricare è lo script RequireJS.

<script data-main="js/app" src="js/require.js"></script> 

L'attributo data-main dice RequireJS per caricare il file in /js/app.js, che contiene le impostazioni di configurazione RequireJS. Ecco un esempio di /js/app.js:

requirejs.config({ 
    "baseUrl": "js/lib", 
    "paths": { 
     "app": "../app", 
     "jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min", 
     "jqueryMobile": "//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min" 
    } 
}); 

// Load the main app module to start the app 
requirejs(["app/main"]); 

In questo caso, /js/app.js viene utilizzato principalmente per la configurazione di percorsi. La proprietà app indica a RequireJS dove cercare la tua app specifica JS e la proprietà jquery indica a RequireJS il percorso dell'URL CDN di Google per jQuery. Infine, utilizza il metodo requirejs() per caricare il tuo file .js. Si noti che tutti i percorsi partono da .js.

A questo punto RequireJS sta cercando il tuo app JS a app/main.js. Crea un file in /js/app/ con il nome main.js - così ora hai un file /js/app/main.js.

Questo file carica tutti i file jQuery e jQuery Mobile dal CDN di Google, in modo asincrono e contiene il resto della logica dell'app. Ecco un esempio di /js/app/main.js:

define(["jquery", "jqueryMobile"], function($) { 
    //jQuery and jQuery Mobile have been loaded. 
    $(function() { 
     // Do stuff with jQuery and jQuery Mobile 
    }); 
}); 

Che effetto ha questo? Diamo un'occhiata a cascata della rete per vedere come i file vengono caricati:

Il diagramma mostra sopra sia jQuery e jQuery Mobile di carico in modo asincrono.

Per una demo simile, vedere RequireJS jQuery example.

Answer 3

Credo che si può utilizzare:

var script = document.createElement('script'); 
script.onload = function() { 
    alert("Script loaded and ready"); 
}; 

script.src = "http://whatever.com/the/script.js"; 
document.getElementsByTagName('head')[0].appendChild(script); 

Può essere attivato ma l'evento che si desidera.

trovato qui: document.createElement("script") synchronously