数据以不整齐的方式加载到页面上

Question

我的页面里面有很多面板或盒子。左侧导航，中心的世界地图，下方3个小图表。加载此页面时，它会以非常随意的方式加载容器内的数据，中心世界地图向下和向上移动，然后加载地图以及下面的3个图表。当我再次单击地图上的某个特定位置时，下面的3个图表会更新，但是当使用新数据刷新时，它们会上下移动。

我使用Grails作为前端页面和html，js，jquery使用ajax调用点击。在html表中使用的类有div用于容器。

所有组件和容器的位置最终都是正确的，但是当任何内容被重新引用或加载页面时，容器会在数据加载之前徘徊不前。 使页面加载动画非常扭曲。

即使对页面的某个部分进行任何刷新，如何将所有容器固定在适当的位置..

此致 Priyank

Answer 1

有两种方法可以解决这个问题，您可以将它们组合使用：

1）使用css为所有容器提供固定的宽度和高度。这样，当内容加载时，布局不会跳转。

2）隐藏容器的内容，并仅在所有内容加载后显示。您可以让每个ajax调用在完成时设置一个标志，然后检查是否设置了所有其他标志。如果是，请取消隐藏所有内容。