javascript - 异步加载 Google jsapi

Question

今天 Google 图表出现问题，因此如果我们无法加载 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=... 内容是多余的。

只需将您的网址更改为 //www.google.com/jsapi，然后将 'callback' 添加到 load 调用中确保在 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>