Question

我遇到了将加载程序与d3.js（d3_queue.js）集成的问题。目前，我正在使用JS hack来显示在页面加载时调用的加载屏幕，一旦绘制了图形，我就会使用jQuery隐藏加载器。

代码：

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

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

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

我遇到的问题是加载程序隐藏而不管加载的数据是什么，即它根据给定的超时时间隐藏在1000毫秒之后。

Answer 1

模块d3-queue旨在明确允许并发加载资源，这些资源本质上需要异步处理：

队列使用可配置的并发性评估零个或多个延迟异步任务：您可以控制同时运行的任务数。当所有任务完成或发生错误时，队列会将结果传递给等待回调。

由于您已经向.awaitAll()提供了回调makeCharts()，因此您还应该将功能隐藏到该回调中。这将确保在所有资源完成加载后加载器被隐藏。您的代码可能如下所示：

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

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

将加载器与d3.js集成

1 个答案: