今天 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 文件超时并继续?
谢谢!
最佳答案
由于您在成功时调用了 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>
关于javascript - 异步加载 Google jsapi,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19126279/