jquery - Load Google Visualization API After Page Load -

jquery - Load Google Visualization API After Page Load -

i using google visualization api create tables on page. these tables info queries take lot of time. since google visualization's default behavior phone call api draw chart in header, slows downwards page load time.

i want load page temporary 'loading' images, , execute script after page loads page feels more responsive. there way this?

i've tried using jquery(window).load didn't work.

**update: paging table looks temporary solution problem (e.g table.draw(data, {page: 'enable' ,pagesize: 100})), it's defiantly not stable solution it's something, problem solves problem tables not graphs, go on updates

create <div> element 'loading' image on top of <div> have chart in. display when page loads (which show 'loading' default when start page).

using ready event of table chart, create listener trigger when table ready use. in event, create function hides 'loading' image's <div> css doesn't show anymore.

see illustration here. code follows:

google.load('visualization', '1', {packages: ['table']}); google.setonloadcallback(drawvisualization); function drawvisualization() { var datatable = new google.visualization.datatable(); datatable.addcolumn('string', 'label'); datatable.addcolumn('number', 'foo'); datatable.addcolumn('number', 'bar'); datatable.addcolumn('number', 'caz'); datatable.addcolumn('number', 'cad'); (var = 0; < 500; ++i) { datatable.addrow(['label ' + i, math.random()*100, math.random()*100, math.random()*100, math.random()*100]) } var table1 = new google.visualization.table(document.getelementbyid('table')); google.visualization.events.addlistener(table1, 'ready', function() { document.getelementbyid('loading').style.display='none'; alert("chart ready!"); }); table1.draw(datatable, null); }

jquery google-visualization