Показать загрузку SVG во время загрузки данных на DOM - PullRequest
Новая
       22

Показать загрузку SVG во время загрузки данных на DOM

0 голосов
/ 04 февраля 2020

У меня есть тысячи строк (значения x и y), которые возвращаются из запроса SQL из вызова AJAX. Каждая строка затем наносится на график (Plotly JS) и заполняет таблицу на странице. То, что я хотел бы сделать, пока он строит графики и добавляет их в таблицу, показывает анимацию загрузки (сделанную с SVG и CSS). Проблема в том, что анимация застряла, поскольку оба элемента (таблица / график и анимация загрузки) находятся в одном и том же окне, и я читал и пробовал WebWorker, но могу только отправлять / получать сообщения, но не могу влиять на элементы в WebWorkers.

Ajax код: 

function openReport(reportId) {
    $.ajax({
        url: '/OpenReport',
        type: "GET",
        contentType: "application/json; charset=utf-8;",
        dataType: "json",
        async: false,
        data: { "reportId": reportId },
        success: function(data) {
            showLoader();

            plotGraph(data);
            addToTable(data);

            hideLoader();
        }
    });
}

Я пытался внедрить загрузчик в WebWorkers: 

onmessage = function(e) {
    plotGraph(e.data);
    addToTable(e.data);        
};

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

1 Ответ

0 голосов
/ 04 февраля 2020

Вы можете использовать: 

....
beforeSend: function() {
    // setting a loader for body or each element
    $('.body').addClass('loading');
},
....

Это сработает перед отправкой вашего запроса данных - точно так же, как указано в имени функции. вот пример вопроса об этом

...