Caricamento di jsapi in modo asincrono

Question

C'è stato un problema con i grafici di Google oggi, quindi stiamo cercando di fallire con garbo se non siamo in grado di caricare il file js. Le seguenti opere di bene:

<script type="text/javascript" src="https://www.google.com/jsapi?autoload=%7B%22modules%22%3A%5B%7B%22name%22%3A%22visualization%22%2C%22version%22%3A%221.0%22%2C%22packages%22%3A%5B%22corechart%22%5D%7D%5D%7D"></script> 

Il problema è che bloccherà l'esecuzione altro codice in quanto è in attesa per lo script per time out.

Il codice sotto carichi,

<script type="text/javascript"> 
$.ajax({ 
    url: 'https://www.google.com/jsapi?autoload=%7B%22modules%22%3A%5B%7B%22name%22%3A%22visualization%22%2C%22version%22%3A%221.0%22%2C%22packages%22%3A%5B%22corechart%22%5D%7D%5D%7D', 
    dataType: 'script', 
    cache: true, // otherwise will get fresh copy every page load 
    success: function() { 
     google.load("visualization", "1", {packages:["corechart"]}); 
    } 
}); 
</script> 

ma errori quando si tenta di utilizzare una visualizzazione come

var data = new google.visualization.DataTable(); 

è quello che sto facendo possibile o sono abbiamo bloccato con il problema della se Google sta avendo problemi, non ci resta che attendere il timeout del file js e andare avanti?

Grazie!

Answer 1

Lo script non verrà eseguito una volta scaricato tramite AJAX. Si desidera utilizzare $.getScript():

$.ajaxSetup({ cache: true }); 
var url = 'https://www.google.com/jsapi?autoload=%7B%22modules%22%3A%5B%7B%22name%22%3A%22visualization%22%2C%22version%22%3A%221.0%22%2C%22packages%22%3A%5B%22corechart%22%5D%7D%5D%7D'; 
$.getScript(url, function() { 
    google.load("visualization", "1", {packages:["corechart"]}); 
}); 

Answer 2

Dal momento che si sta chiamando la funzione google.load in caso di successo, la roba ?autoload=... è ridondante.

Basta cambiare l'URL a //www.google.com/jsapi, e aggiungere un 'callback' alla chiamata load per assicurarsi che il codice drawChart viene chiamato quando corechart è completa.

Ecco un JSFiddle e un frammento di codice: http://jsfiddle.net/c56pC/2/

<script type="text/javascript"> 
$.ajax({ 
    url: '//www.google.com/jsapi', 
    dataType: 'script', 
    cache: true, 
    success: function() { 
     google.load('visualization', '1', { 
      'packages': ['corechart'], 
      'callback': drawChart 
     }); 
    } 
}); 
</script>