在构建并附加到页面后显示部分动态内容

Question

我支持一个网站。 在其中一个页面上，该站点使用 ajax 从后端获取数据，并在接收到数据后，一张一张地构建图表（即饼图和条形图）并将 append 每张图表发送到页面。 第 3 方图表工具是 Highcharts。这是代码结构：

HTML：

<div id="charts"></div>

Javascript：

$.ajax({
    url: backend_URL
    dataType: json,
    success: function(data) {
      var container = $('#charts');
      $.each(data, function(index, item) {
         var chart = ...build-a-chart-by-using-data-item-and-Highcharts...;
         container.append(chart);
      }
    }
});

此代码的问题在于，在构建并附加所有图表之前，页面不会显示任何内容。 如果有 100 个图表，那么用户需要等待很长时间。 更好的用户体验应该是构建图表并将其显示给用户，以便用户可以看到进度并查看显示的内容（而不是看到空白屏幕或模态旋转轮）。 我怎样才能更好地做到这一点？ 我肯定错过了什么。

Answer 1

在您的查询中，您创建了一个容器并将数据加载到其中，这可能是它无法顺利运行的原因。

您正在一次加载大量数据。 相反，您可以尝试为每个图表创建单独的 div。

演示： http://jsfiddle.net/BlackLabel/59ucxq1a/

 Highcharts.ajax({ url: 'https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/activity.json', dataType: 'text', success: function(data) { data = JSON.parse(data); data.datasets.forEach(function(dataset, i) { var chartDiv = document.createElement('div'); chartDiv.className = 'chart'; document.getElementById('container').appendChild(chartDiv); Highcharts.chart(chartDiv, { title: { text: dataset.name, }, series: [{ data: dataset.data, name: dataset.name, type: dataset.type, }] }); }); } });

 .chart { height: 220px; }

 <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/data.js"></script> <script src="https://code.highcharts.com/modules/accessibility.js"></script> <div id="container"></div>