异步加载Google jsapi

Question

今天Google charts出现了一个问题，所以如果我们不能加载js文件，我们会尝试优雅地失败。下面的代码运行良好：

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

问题是，它将阻止运行其他代码，因为它正在等待脚本超时。

加载下面的代码，

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

但是当我尝试使用可视化工具时，它会出错

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

我正在做的事情是可能的，还是我们被困在这样一个问题上:如果Google有问题，我们只需要等待js文件超时并继续前进？

谢谢!

Answer 1

由于您在成功时调用了google.load函数，因此?autoload=...内容是多余的。

只需将您的url更改为//www.google.com/jsapi，并向load调用添加一个'callback'，以确保在corechart完成时调用您的drawChart代码。

下面是一个JSFiddle和一个代码片段：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>

Answer 2

你的脚本一旦通过AJAX下载就不会执行。您想要使用$.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"]}); 
});