可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I have the following script which works, but has one annoying issue:

<html>
<head>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    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'});
    }
</script>
</head>
  <body>
    <div id="header">header goes ehre</div>
    <div id="chart_div"></div>
    <div id="footer">footer goes here</div>
  </body>
</html>

The problem is that sometimes the chart can take a long time to appear for various reasons. When this happens, the header loads, followed by the chart, followed by the footer. This looks awful IMO. IMO, the whole page should load, including the footer, and a flat "loading.." message should be displayed until the chart is ready to display itself, or an animated gif until the chart is ready.

How can I get the whole page to load and display a loading message until the chart is ready, instead of having the footer missing, then the footer suddenly appears once the chart has finished loading?

回答1:

Put the script at the bottom of the HTML file. This won't do a loading screen, but this will prevent the browser from blocking while the chart loads.

To get a loading effect, Google's Charts will overwrite the innerHTML of the div you're pointing it to, so you can keep a loading message in there (in whatever format you desire) and it will get overwritten when the chart loads.

回答2:

I would use an onload handler to call the chart functions. It should wait for the page to load, then add the chart.

$(function(){
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChartAjax);
});

If this doesn't work, perhaps you could add a load handler to the footer div.

回答3:

Does Google Charts clear the chart div on load?

/* style.css */
.preloader {
    height:350px; background:url(../images/spinner.gif) center center no-repeat;
}

Set the height of the preloader equal to the resulting chart.

<!-- HTML -->
<div id="chart_div"><div class="preloader">&nbsp;</div></div>

If it doesn't clear the preloader, you should add a callback on chart load to clear it.

回答4:

You can also take advantage of Google Chart events to listen for when the chart has loaded and perform an action. It may require you to initially hide the chart container or overlay a loading icon. Example:

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 */
        });