我如何确保在使用图表之前加载它们？

Question

I want to load my google charts before I i run the rest of my javascript.

$(document).ready(function() {
google.charts.load("current", {packages:["corechart"]});

I originally put this code in to allow some time for the charts to load, but sometimes the charts take longer than expected and my code breaks. Is there an initializer function in javascript that I can use?

setTimeout(function() {
    map.setView([gon.locations[3].latitude, gon.locations[3].longitude - .01],15);
    if(typeof lastMarker !== "undefined")
        map.removeLayer(lastMarker);
    $('progress').animate({value: gon.locations[3].overall_vulnerability}, {duration: 1000});
    $('#vul').html(gon.locations[3].overall_vulnerability);
    var markers = L.mapbox.featureLayer().setGeoJSON(getData(gon.locations[3])).addTo(map);
        google.charts.setOnLoadCallback(drawChart(gon.locations[3]));
    openNav();
    lastMarker = markers;
}, 1500);

Answer 1

That is what the setOnLoadCallback() function is for - it runs when the loading is finished.

google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(function() {
    // Everything you want to happen after loading goes here
});

From the documentation :

Before you can use any of the packages loaded by google.charts.load you have to wait for the loading to finish. It is not enough to just wait for the document to finish loading. Since it can take some time before this loading is finished, you need to register a callback function.

Answer 2

you can also include the callback in the load statement...

google.charts.load("current", {
  callback: function () {
    // google.charts and google.visualization now available
  },
  packages:["corechart"]
});

or use the promise the load statement returns

google.charts.load("current", {
  packages:["corechart"]
}).then(function () {
  // google.charts and google.visualization now available
});