Интеграция загрузки изображений с jQuery и Google Visualization - PullRequest
Новая
       4

Интеграция загрузки изображений с jQuery и Google Visualization

1 голос
/ 07 декабря 2011

В настоящее время я работаю над унаследованным проектом, который использует API визуализации Google (как для Python, так и для Javascript).Поскольку анализ данных для Gviz занимает некоторое время, я пытаюсь позволить странице получить загружаемое изображение и отобразить его во время загрузки соответствующих диаграмм с помощью вызовов AJAX.

Хотя я могбыть неправым, я считаю, что я правильно его кодировал;ниже вы можете найти соответствующий код, который я вставил в часть страницы <head>. 

$(function() {
    var dates = $("#from, #to").datepicker({
        numberOfMonths: 1,
        beforeShow: function() {
            var other = this.id == "from" ? "#to" : "#from";
            var option = this.id == "from" ? "maxDate" : "minDate";
            var selectedDate = $(other).datepicker('getDate');
            $(this).datepicker("option", option, selectedDate);
        },
        onSelect: function(dateText, inst) {
            drawCharts();
        }
    }).change(function() {
        var other = this.id == "from" ? "#to" : "#from";
        if ($('#from').datepicker('getDate') > $('#to').datepicker('getDate'))
            $(other).datepicker('setDate', $(this).datepicker('getDate'));
    });
    $("#from").datepicker("setDate", '-13');
    $("#to").datepicker("setDate", new Date());

    $("#weekly_cohorts").click(function() {
        weekly = true;
        drawCharts();
    });

    $("#monthly_cohorts").click(function() {
        weekly = false;
        drawCharts();
    });

    // ERROR OCCURS HERE
    google.load('visualization', '1', {packages:['corechart', 'table']});
    google.setOnLoadCallback(getData);
});

Когда я запускаю это, консоль JavaScript Chrome отображает сообщение об ошибке в виде строкEVENT FIRED TOO FAST, что не имеет смысла для меня в соответствии с jQuery API .

Если я вызову две строки раньше (т. Е. За пределами $( handler ))Тем не менее, у меня нет проблем, но изображение предварительной загрузки не получается, пока не станет слишком поздно.

Что не так, и как я могу это исправить? Хотя я мог просто переместитьсценарий до конца тела, я предпочитаю, чтобы все мои таблицы стилей и ссылки на сценарии были в голове.

РЕДАКТИРОВАТЬ: Консоль Chrome больше не выдает мне эту ошибку, но поскольку страница неполностью не рендерится до вызова скрипта, он не может взаимодействовать с DOM.Кроме того, изображение по-прежнему не извлекается до тех пор, пока не будет выполнено выполнение сценария.

Опять же, любые идеи о том, как отложить выполнение сценария (инициируется второй строкой) от события DOMContent до события Load (т.е. достраница полностью отображается)?

РЕДАКТИРОВАТЬ 2: Я кратко удалось заставить его работать как нужно, но только после того, как я перезапустил Chrome.Однако я полагаю, что это произошло только потому, что оно уже было сохранено в локальном кэше (т. Е. HTTP-код ответа 304), поскольку обновление страницы только возвращало проблему «страница не отображается перед вызовом сценария».

1 Ответ

0 голосов
/ 27 декабря 2011

Редактировать: Перевести ваш вызов на google.load() в обработчике img onload.Не используйте для этого jQuery, так как img, возможно, уже загружен к моменту вызова обработчика ready. 

<img src="loading.gif" onload="loadCharts()" />

function loadCharts () {
    google.load('visualization', '1', {packages:['corechart', 'table']}); 
    google.setOnLoadCallback(getData); 
}

Исходный ответ:

IsgetData() ваш предполагаемый обработчик загрузки?Или он возвращает функцию, которую вы хотите использовать в качестве обработчика загрузки?Если он сам является обработчиком загрузки, удалите скобки, чтобы вернуть ссылку на функцию, а не немедленно вызывать функцию: 

google.setOnLoadCallback(getData);

Но, если getData() действительно сам возвращает функцию, и вынеобходимо отложить выполнение кода до тех пор, пока страница не загрузится, привязать к событию window.onload: 

$(window).load(function () {
    ...
});

вместо document.ready ($(function () { ... })).

...