Ładowanie Google jsapi asynchronicznie

Question

Wystąpił problem z wykresami Google dzisiaj, więc próbujemy zawodzić z gracją, jeśli nie możemy załadować pliku js. Następujące działa poprawnie:

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

Problem polega na tym, że blokuje on uruchamianie innego kodu w oczekiwaniu na przekroczenie limitu czasu skryptu.

Kod poniżej obciążeń

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

ale błędy gdy próbuję użyć wizualizacji takiej jak

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

Czy to, co robię, czy możliwe są trzymaliśmy się z problemem jeśli Google ma problemy, musimy po prostu czekać na plik js do przekroczenia limitu czasu i przejść dalej?

Dzięki!

Answer 1

Twój skrypt nie zostanie uruchomiony po pobraniu przez AJAX. Chcesz używać $.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

Skoro jesteś wywołanie funkcji google.load Po pomyślnym zakończeniu ?autoload=... rzeczy jest zbędna.

Wystarczy zmienić swój adres URL do //www.google.com/jsapi i dodać 'callback' na wezwanie load, aby upewnić się, że Twój kod drawChart nazywa kiedy corechart ukończone,.

Oto JSFiddle i fragment kodu: 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>