Laden von Google jsapi asynchron

Question

Es gab ein Problem mit Google-Karten heute, so dass wir versuchen, ordnungsgemäß zu scheitern, wenn wir die js-Datei nicht laden können. Die folgenden Werke fein:

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

Das Problem ist, dass es einen anderen Code ausgeführt wird blockiert, wie es für das Skript zu Zeit wartet.

Der folgende Code lädt,

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

aber es Fehler, wenn ich versuche, eine Visualisierung wie

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

zu verwenden ist, was ich tue möglich oder sind wir mit dem Problem stecken Wenn Google Probleme hat, müssen wir nur auf die Zeitüberschreitung der js-Datei warten und weitermachen?

Danke!

Answer 1

Ihr Skript wird nicht ausgeführt, sobald es über AJAX heruntergeladen wurde. Sie wollen $.getScript() verwenden:

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

Da Sie die google.load Funktion auf Erfolg anrufen, die ?autoload=... Sachen überflüssig ist.

Ändern Sie einfach Ihre URL zu //www.google.com/jsapi und eine 'callback' zum load Anruf hinzufügen, um sicherzustellen, dass Ihr drawChart Code, wenn corechart abgeschlossen ist aufgerufen wird.

Hier ist ein JSFiddle und ein Code-Schnipsel: 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>