我目前正在开发一个继承项目，该项目使用 Google 的可视化 API(适用于 Python 和 Javascript)。由于解析 Gviz 的数据需要一段时间，因此我尝试让页面获取 loading image并在通过 AJAX 调用加载相关图表时显示它。
虽然我可能是错的，但我相信我的编码是正确的；下面你可以找到相关的代码，我已将其插入到 <head> 中页面的一部分。
$(function() {
var dates = $("#from, #to").datepicker({
numberOfMonths: 1,
beforeShow: function() {
var other = this.id == "from" ? "#to" : "#from";
var option = this.id == "from" ? "maxDate" : "minDate";
var selectedDate = $(other).datepicker('getDate');
$(this).datepicker("option", option, selectedDate);
},
onSelect: function(dateText, inst) {
drawCharts();
}
}).change(function() {
var other = this.id == "from" ? "#to" : "#from";
if ($('#from').datepicker('getDate') > $('#to').datepicker('getDate'))
$(other).datepicker('setDate', $(this).datepicker('getDate'));
});
$("#from").datepicker("setDate", '-13');
$("#to").datepicker("setDate", new Date());
$("#weekly_cohorts").click(function() {
weekly = true;
drawCharts();
});
$("#monthly_cohorts").click(function() {
weekly = false;
drawCharts();
});
// ERROR OCCURS HERE
google.load('visualization', '1', {packages:['corechart', 'table']});
google.setOnLoadCallback(getData);
});
当我运行此命令时，Chrome 的 JavaScript 控制台会显示一条错误消息 EVENT FIRED TOO FAST ，根据 jQuery API 这对我来说没有意义.
如果我提前调用这两行(即在 $( handler ) 之外)，我就没有问题，但预加载图像不会被获取，直到为时已晚。
出了什么问题，如何修复它？虽然我可以将脚本移到正文的末尾，但我更喜欢将所有样式表和脚本引用放在头部。
编辑: Chrome 的控制台不再给出该错误，但由于页面在调用脚本之前未完全呈现，因此它无法与 DOM 交互。此外，直到脚本执行后仍然不会获取图像。
同样，关于如何将脚本执行(由第二行触发)从 DOMContent 事件延迟到 Load 事件(即，直到页面完全呈现)有什么想法吗？
编辑 2: 我短暂地设法让它按预期工作，但只有在我重新启动 Chrome 之后。但是，我相信这只是因为它已经存储在本地缓存中(即 HTTP 响应代码 304)，因为刷新页面只会带来“调用脚本之前页面未渲染”问题。
最佳答案
编辑:将对 google.load() 的调用放入 img onload 处理程序中。不要为此使用 jQuery，因为在调用 ready 处理程序时，img 可能已经加载。
<img src="loading.gif" onload="loadCharts()" />
function loadCharts () {
google.load('visualization', '1', {packages:['corechart', 'table']});
google.setOnLoadCallback(getData);
}
原答案:
getData() 是您想要的 onload 处理程序吗？或者它是否返回一个您想要用作 onload 处理程序的函数？如果它本身是 onload 处理程序，请删除括号以返回函数引用，而不是立即调用该函数:
google.setOnLoadCallback(getData);
但是，如果 getData() 本身确实返回一个函数，并且您需要将代码执行延迟到页面加载之后，请绑定(bind)到 window.onload 事件:
$(window).load(function () {
...
});
而不是document.ready ($(function () { ... }))。
关于javascript - 将加载图像与 jQuery 和 Google Visualization 集成，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8410564/