Как показать загружаемую диаграмму vis.js

Question

Впервые получить доступ к графику временной шкалы vis.js. Браузер пользователя должен загрузить библиотеку vis.js. Потребуется некоторое время, чтобы показать график. Мне интересно, как отобразить сообщение или анимированное изображение до полной загрузки графика.

Как только график будет полностью загружен, позвольте сообщению или изображению исчезнуть.

Заранее спасибо.

Answer 1

Вы должны использовать события стабилизации, как показано в этом примере в документации по vis.js. В нем приведен пример реализации панели загрузки, но вы можете использовать этот механизм и для реализации других решений.

Answer 2

Я решил это с помощью onInitialDrawComplete обратный вызов в настройках временной шкалы.

Покажите любой механизм загрузчика, который вы хотите, а затем поменяйте его с временной шкалой, как только это сработает.

Answer 3

Если вы хотите что-то делать до тех пор, пока не будет загружен весь HTML, здесь есть решение, которое может вам помочь: Как я могу отображать загрузочный GIF, пока не будет загружена вся HTML-страница

Я также использую временную шкалу vis.js в одном из своих проектов и использую ajax для передачи данных с сервера на временную шкалу. Для такого рода презентаций я использую загрузчик ajax, вот так, он отлично работает:

в разделе :

<script>
$( function() {
    var $loading = $('#loadingDiv').hide();
    $(document)
      .ajaxStart(function () {
        $loading.show();
      })
      .ajaxStop(function () {
        $loading.hide();
      });
});
</script>

в разделе :

<div id="loadingDiv" style="margin-left:auto; margin-right:auto; position:fixed; left: 50%; margin-left:-150px; top:50%; margin-top:-200px; z-index:1000; opacity: 0.35; filter: alpha(opacity=35); ">
<img id="loading-image" src="./ajax-loader.gif" alt="Loading..." />
</div>