Почему загрузка Google не загружается до тех пор, пока я не обновляюсь

Question

Я использую диаграммы Google некоторое время без каких-либо проблем. Мой код совсем не изменился, но в последнее время мои диаграммы не загружаются, пока я не обновляю браузер несколько раз, и жду, а затем снова обновляюсь. Когда диаграммы загружаются, они прекрасны. Я могу пойти на другие страницы и вернуться, и они мгновенно загружаются. Я скажу, что теперь я загружаю свой jquery после моего html, а не раньше, что дважды делает загрузку страницы перед jquery.

Я использую mozilla firefox. Если я не закрываю браузер, все в порядке, но как только я закрою браузер и вернусь на страницу, графики сразу не покажут. Что заставляет меня думать, что, как только он находится в кеше, все в порядке, но я думаю, что есть проблема с загрузкой loader.js из графиков Google.

Я включил диаграмму Google, используя следующие

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 

Затем я включил мой JQuery

<script type="text/javascript" src="js/charts.js"></script> 

Изначально я не ставил свой код в документ готов, но я добавил, что в последнее время, чтобы сделать убедитесь, что страница загрузилась, прежде чем запускать мой код.

Тогда вот мой charts.js JQuery код для загрузки графика (я, очевидно, включают в JQuery, но не показано, что здесь)

$(document).ready(function(){ 
    $.post("database/home/ajax/ajax.php", {CODE:"loadCharts"}, function(data){ 

     google.charts.load('current', { 
      callback: function() { 

      myData1=data.chart.splice(0,data.salesCount); 
      myData2=data.chart.splice(0,data.expensesCount); 
      myData3=data.chart.splice(0,data.hrcostCount); 

      drawBarChart('total_sales_chart',myData1,"Total Sales Last Six Months","Sales"); 
      drawBarChart('total_expenses_chart',myData2,"Total Expenses Last Six Months","Expenses"); 
      drawBarChart('total_hr_chart',myData3,"Total HR Costs Last Six Months","HR Costs"); 

      function drawBarChart(id,myData,title,axis) { 
       var data = new google.visualization.DataTable(); 
       data.addColumn('date', 'Month'); 
       data.addColumn('number', axis); 

       var dataLength= myData.length; 

       var rows = new Array();  

       for(var i = 0; i < dataLength ; i++) { 
        rows.push([new Date(myData[i][0]),0]); 
       } 
       data.addRows(rows); 

       var options = { 
        title: title, 
        hAxis: { 
         title: axis 
        }, 
        vAxis: { 
         title: 'Month' 
        }, 
        backgroundColor: { fill:'transparent' }, 
        legend: {position: 'none'}, 
        'animation':{duration:1000,easing:'out'} 
       }; 
       var chart = new google.visualization.BarChart(document.getElementById(id)); 
       chart.draw(data, options); 

       setTimeout(function(){ 
        for(i=0;i<dataLength;i++){ 
         data.setValue(i,1,myData[i][1]); 
        } 
        chart.draw(data, options); 
       },1000);  
      } 
      }, 
      packages: ['corechart'] 
     }); 
    },"JSON"); 
}); 

Сообщение, где я получаю мои данные из внутреннего интерфейса. Я знаю, что мой пост в порядке, потому что он возвращается мгновенно, но я знаю, что код после обратного вызова не запускается каждый раз. Это означает, что по какой-то причине я не думаю, что loader.js загружается правильно.

Как только графики показывают, все в порядке. Может ли кто-нибудь сказать мне, почему диаграммы не загружаются при первой загрузке страницы?

Если вам интересно о сращивании, я могу рассказать вам об этом. Я возвращаю все свои данные в один массив, а затем разбиваю их на 3 массива, поэтому мне нужно сделать только одно сообщение для трех диаграмм. Однако нет ничего плохого в моих массивах, просто обратный вызов диаграммы google.

Answer 1

Ответ на этот вопрос. Даже несмотря на то, что я отключил блокировщик всплывающих окон, чтобы увидеть, вызвало ли это проблему, было что-то, чего я не знал. Mozilla Firefox имеет встроенный блокировщик всплывающих окон. В разделе «Инструменты/Параметры/Контент». Вам нужно отключить всплывающие окна блоков, а затем диаграммы google будут загружаться в mozilla. Это несколько недель беспокоило меня, и я даже не знал, что у него встроенный блокировщик всплывающих окон.

Answer 2

Google, callback может быть использован вместо ->$(document).ready

попробуйте позвонить google.load, прежде чем что-либо еще

если callback пожары, и $.post работы,
, то не должно быть никакой задержки в рисовании диаграммы

попробуйте провести реструктуризацию, как показано в следующем фрагменте ...

---

google.charts.load('current', { 
    packages: ['corechart'], 
    callback: function() { 
    $.post("database/home/ajax/ajax.php", {CODE:"loadCharts"}, function(data){ 
     myData1=data.chart.splice(0,data.salesCount); 
     myData2=data.chart.splice(0,data.expensesCount); 
     myData3=data.chart.splice(0,data.hrcostCount); 

     drawBarChart('total_sales_chart',myData1,"Total Sales Last Six Months","Sales"); 
     drawBarChart('total_expenses_chart',myData2,"Total Expenses Last Six Months","Expenses"); 
     drawBarChart('total_hr_chart',myData3,"Total HR Costs Last Six Months","HR Costs"); 

     function drawBarChart(id,myData,title,axis) { 
      var data = new google.visualization.DataTable(); 
      data.addColumn('date', 'Month'); 
      data.addColumn('number', axis); 

      var dataLength= myData.length; 

      var rows = new Array(); 

      for(var i = 0; i < dataLength ; i++) { 
       rows.push([new Date(myData[i][0]),0]); 
      } 
      data.addRows(rows); 

      var options = { 
       title: title, 
       hAxis: { 
        title: axis 
       }, 
       vAxis: { 
        title: 'Month' 
       }, 
       backgroundColor: { fill:'transparent' }, 
       legend: {position: 'none'}, 
       'animation':{duration:1000,easing:'out'} 
      }; 
      var chart = new google.visualization.BarChart(document.getElementById(id)); 
      chart.draw(data, options); 

      setTimeout(function(){ 
       for(i=0;i<dataLength;i++){ 
        data.setValue(i,1,myData[i][1]); 
       } 
       chart.draw(data, options); 
      },1000); 
     } 
    },"JSON"); 
    } 
});