30 экземпляров плагина jQuery на одной странице. Оптимизация? - PullRequest
Новая
       1

30 экземпляров плагина jQuery на одной странице. Оптимизация?

1 голос
/ 26 июля 2011

У меня есть календарь Я генерирую с помощью PHP, который показывает стандартное представление месяца.Внутри ячейки каждого дня есть экземпляр jqPlot , который загружает ряд точек.

Каждый день имеет свой график, поэтому на 31 день мне нужно 31 график.В Firefox заметное отставание составляет 1-2 секунды.В IE это 6 или 7 секунд.Это все время рендеринга на стороне клиента.

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

Ниже приведен примерный PHP-скрипт того, что я делаю. 

    echo "<script type=\"text/javascript\">

    $(document).ready(function(){

    try {

    $.jqplot ('calendarchart$this_day', [[";

    foreach($todays_kwhs as $row){

        echo '["'.date('H:i', $row['time_read']).'",'.$row['kwh']. '],';

    }
    echo "]], 
          {
            axes: {
              xaxis: {
                showTicks: false,
                renderer: $.jqplot.DateAxisRenderer,
                ticks: [['00:00', '12AM'], ['06:00', '6AM'], ['12:00', '12PM'], ['18:00', '6PM'], ['24:00','12AM']]        ,
                pad: 0.0,
                tickOptions: {
                  formatString: '%H:%I%p'
                }
              },
              yaxis: {
                showTicks: false,
                min: 0,
                max: 600,
                pad:0.0
              }
            },
            seriesDefaults: {
              show: true,
              lineWidth: 1.0,
              markerOptions: {
                show: false
              }
            },
            gridPadding: {top:1, right:1, bottom:1, left:1},
            grid: {
              background: '#ffffff',
              borderWidth: 0,
              borderColor: '#cccccc',
              shadow: false,
              drawGridlines: true,
              gridLineColor: '#f0f0f0'
            }
          }
        );
      } catch(err) { console.log(err); }
    });
    </script>";
    }

Естественно, все это повторяется около 30 раз и зависает на пару секунд.

...