谷歌图表加载消息
我有以下脚本可行，但有一个恼人的问题：
google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChartAjax); function drawChartAjax() { $.ajax({ url: 'chart_json.aspx', type: 'POST', dataType: 'json', success: function(data) { drawChart(data); } }); } function drawChart(json) { var data = new google.visualization.DataTable(); data.addColumn('string', 'User'); data.addColumn('number', 'v'); data.addRows(json.length); for(var j in json) { for(var k in json[j]) { data.setValue(parseInt(j), 0, k); data.setValue(parseInt(j), 1, json[j][k].v); } } var chart = new google.visualization.PieChart( document.getElementById('chart_div') ); chart.draw(data, {width: 500, height: 300, is3D: true, title: 'Titles goes here'}); } header goes ehre 问题是，由于各种原因，有时图表可能需要很长时间才能显示。 发生这种情况时，标题会加载，然后是图表，然后是页脚。 这看起来很糟糕IMO。 IMO，整个页面应该加载，包括页脚，并且应该显示平坦的“loading ..”消息，直到图表准备好显示自己，或者动画gif直到图表准备就绪。
如何在整个页面加载并显示加载消息直到图表准备就绪，而不是丢失页脚，然后在图表加载完成后突然出现页脚？
将脚本放在HTML文件的底部。 这不会执行加载屏幕，但这会阻止浏览器在图表加载时阻塞。
要获得加载效果，Google的图表将覆盖您指向它的div的innerHTML，因此您可以在其中保留加载消息（以您希望的任何格式），并且在图表加载时它将被覆盖。
我会使用onload处理程序来调用图表函数。 它应该等待页面加载，然后添加图表。
$(function(){ google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChartAjax); });
如果这不起作用，也许你可以在页脚div中添加一个加载处理程序。
Google Charts是否会在加载时清除图表div？
/* style.css */ .preloader { height:350px; background:url(../images/spinner.gif) center center no-repeat; }
将预加载器的高度设置为等于结果图表。
如果它没有清除预加载器，则应在图表加载上添加回调以清除它。
您还可以利用Google Chart事件来监听图表何时加载并执行操作。 可能需要您最初隐藏图表容器或覆盖加载图标。 例：
google.visualization.events.addListener(chart, 'ready', function() { // Do something like ... /* $('#chart_div').css('visibility', 'visible'); // provided this was already hidden $('.loading-icon').hide(); // if it exists in your HTML */ });