Блог

Я столкнулся с проблемой интеграции загрузчика с d3.js (d3_queue.js ). В настоящее время я использую JS-хак, чтобы показать экран загрузки, который вызывается при загрузке страницы, и как только графики нарисованы, я скрываю загрузчик с помощью jQuery.

Код:

 $(".loader").show();

d3_queue.queue()
  .defer(d3.json, url) 
  .awaitAll(makeCharts);

setTimeout(function() {
  $('.loader').hide();
}, 1000);
  

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

Модуль d3-queue был разработан, чтобы явно разрешить одновременную загрузку ресурсов, которые по своей природе требуют асинхронной обработки:

Очередь оценивает ноль или более отложенных асинхронных задач с настраиваемым параллелизмом: вы контролируете, сколько задач выполняется одновременно. Когда все задачи завершены или возникает ошибка, очередь передает результаты вашему обратному вызову await.

Поскольку вы уже предоставляете свой обратный вызов makeCharts() для .awaitAll() , вам также следует перенести функцию скрытия в этот обратный вызов. Это гарантирует, что загрузчик будет скрыт после завершения загрузки всех ресурсов. Ваш код может выглядеть следующим образом:

 function makeCharts(error, files) {
  // ... process loaded files
  $('.loader').hide();
}

$(".loader").show();
d3_queue.queue()
  .defer(d3.json, url) 
  .awaitAll(makeCharts);