Google график загрузки сообщений

У меня есть следующий скрипт, который работает, но имеет один досадный вопрос:Google график загрузки сообщений

<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>

Проблема заключается в том, что иногда диаграмма может занять много времени, чтобы появиться по разным причинам. Когда это происходит, загружается заголовок, за которым следует диаграмма, а затем нижний колонтитул. Это выглядит ужасно ИМО. IMO, должна загрузиться вся страница, включая нижний колонтитул, и плоское сообщение «loading ..» должно отображаться до тех пор, пока график не будет готов отображать себя или анимированный gif до тех пор, пока график не будет готов.

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

источник

2010-11-01 oshirowanen

Поместите скрипт внизу HTML-файла. Это не будет делать экран загрузки, но это предотвратит блокировку браузера во время загрузки диаграммы.

Чтобы получить эффект загрузки, диаграммы Google будут перезаписывать внутреннийHTML div, на который вы указываете его, поэтому вы можете оставить там загружаемое сообщение (в любом формате), и он будет перезаписан, когда диаграмма грузы.

источник

2010-11-03 12:23:09

Я бы не стал спорить, был ли это годом 2003 года, но это слишком старая школа. Вы не можете предположить, что DOM готов, даже когда скрипт находится в конце файла. Боздос дал правильный ответ. Использование $ (function) приводит к тому, что код внутри запускается после того, как DOM готов. – naugtur

Спасибо за признание naugtur! :) – bozdoz

Разве Google Chart очищает диаграмму div при загрузке?

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

Установите высоту предварительного натяга, равную результирующей диаграмме.

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

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

источник

2010-11-03 12:19:26

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

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

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

источник

2010-11-03 12:24:21 bozdoz

Вы также можете воспользоваться Google Chart events, чтобы прослушать, когда карта загружена и выполнить действие. Это может потребовать, чтобы вы сначала спрятали контейнер диаграммы или наложили значок загрузки. Пример:

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

источник

2014-10-13 14:04:26

Google график загрузки сообщений

ответ

Смежные вопросы