以不整潔的方式在頁面上加載數據

Question

我有一個頁面，裏面有許多面板或框。左側導航，中心世界地圖，下方3個小圖。當這個頁面被加載時，它以非常隨意的方式加載容器中的數據，中心世界地圖向下和向上移動，然後加載地圖，類似於下面的3個圖表。當我再次點擊地圖上的特定位置時，下面的3個圖表會根據它們的情況更新，但當用新數據刷新時，它們的容器會上下移動。

我使用Grails作爲前端頁面和html，使用js，jquery使用ajax調用點擊。有一些div在html表格中用於容器。

所有組件和容器的位置最終都是正確的，但是當任何事情被刷新或者頁面被加載時，容器都會變化很多，直到數據被加載。 使頁面加載動畫非常失真。

如何使所有固定在位置上的容器，即使有任何刷新頁面的一部分..

問候 Priyank

Answer 1

有2種方式，你可能會解決這個問題，你可以組合使用：

1）使用CSS來給所有的容器一個固定的寬度和高度。通過這種方式，佈局不會在內容加載時跳過。

2）隱藏容器的內容，只在所有內容加載後才顯示它們。每個ajax調用完成後都可以設置一個標誌，然後檢查是否設置了所有其他標誌。如果是這樣，取消隱藏所有內容。