javascript加載屏幕，直到數據加載

首先，我是全新的網絡編程 - JavaScript，CSS等。我知道一些HTML和來自不同語言的腳本背景（lua，批處理，shell等）。。javascript加載屏幕，直到數據加載

因此，我創建了一個網頁來顯示一些從模擬器生成的統計數據到MySql數據庫中。所以要顯示它，我想我是否應該去PHP，但最終因爲我已經在服務器端使用Flask和Python，並且它不支持PHP，因此我決定通過javascript和jquery顯示統計信息。

所以它的工作方式是，我有一個帶有標籤的頂層菜單，每次點擊一個標籤時它應該顯示該頁面，在其中一個頁面中，我們可以點擊其中一個表格行來導航到另一個標籤，問題是，該選項卡顯示在數據加載到該選項卡中的表之前。

選項卡的功能（從某處複製在網絡上）：

function openCity(evt, cityName) { 
     var i, tabcontent, tablinks; 
     tabcontent = document.getElementsByClassName("tabcontent"); 
     for (i = 0; i < tabcontent.length; i++) { 
      tabcontent[i].style.display = "none"; 
     } 
     tablinks = document.getElementsByClassName("tablinks"); 
     for (i = 0; i < tablinks.length; i++) { 
      tablinks[i].className = tablinks[i].className.replace(" active", ""); 
     } 
     document.getElementById(cityName).style.display = "block"; 
     evt.currentTarget.className += " active"; 
    };

行處理程序來捕獲單擊行和運行鏈接服務器獲取數據對於飛行員：

function addRowHandlers() { 
     var table = document.getElementById("pilotsOverview"); 
     var rows = table.getElementsByTagName("tr"); 
     for (i = 0; i < rows.length; i++) { 
      var currentRow = table.rows[i]; 
      var createClickHandler = 
       function(row) 
       { 
        return function() { 
              var cell = row.getElementsByTagName("td")[0]; 
              var id = cell.innerHTML; 
              myFunction(id) 
            }; 
       }; 

      currentRow.onclick = createClickHandler(currentRow); 
     } 
    }

爲每個飛行員姓名獲取相關GUID的功能，從服務器啓動數據加載並單擊選項卡。會發生什麼情況是數據稍後加載並且首先顯示標籤，需要獲得運行加載程序的方法，直到這些函數完成 - pilotsoverview，pilotinfo。

function myFunction(pilotname) { 
     if (pilotname == null) 
     { 
      var pilotname = document.getElementById("list_players").value; 
     } 
     var ucid; 
     for (var key in allPilotArr) { 
      if (pilotname==allPilotArr[key]) 
      { 
       ucid = key; 
      } 
     }; 
     document.getElementById("demo").innerHTML = "Loading "+pilotname+" Pilot Statistics"; 
     console.log(ucid) 
     pilotsoverview(ucid) 
     pilotinfo(ucid) 
     document.getElementById("pinfo").click(); 
     <!-- location.href='/statistics/'+ucid; --> 
    };

希望這是有道理的，或者我解釋說不夠好，我說我真的很新的JavaScript和Web服務器VS客戶端。

感謝您的任何幫助。

來源

2017-04-14 Morrtz

把所有內容放在<main>之內，然後把load()放在js腳本的最底部。

在<main>之外放置<div id="loading"></div>。

內。然後function load()把這個：

document.querySelector('main').style.display = "block"; 
document.querySelector('#loading').style.display = "none";

裏面你的CSS把這個：

main { 
    display: none; 
}

然後風格的#loading但是你想，一個紡紗裝圓或加載文本或什麼的。

如果您希望在某個任務完成後完成加載，而不是在頁面首次加載時完成加載，那麼您將在該函數內部放置load()以顯示加載完成後的內容。

這允許在沒有完全加載js文件時存在內容。所以你應該把你的js文件放在body之後的底部，或者最後放在body之內，這樣它會在第一個html之前加載html，然後隱藏加載器並在js文件結束後顯示js文件結束時的內容加載。

來源

2017-04-14 18:34:41

謝謝，我會盡力回覆。 – Morrtz

它似乎沒有工作，該標籤打開之前，數據從服務器加載，一兩秒後，你可以看到數據填充表。有沒有辦法等待數據填充，只有在運行load（）函數後？ – Morrtz

然後把load（）函數加載數據的末尾，而不是在我做的js文件 –

找到了答案：首先，謝謝卡梅隆塞繆爾，你的回答使我朝着正確的方向前進。因此，這裏缺少的部分是，我使用jQuery - getJson從服務器端獲取Json數據，因爲我使用Cameron發送的加載屏幕進行了一些試驗和錯誤，但它明確指出問題並非如此（儘管可能通過檢查tbody元素），而是通過在getJson完成時啓動負載，回答如何做到這一點可以在這裏看到 - How to catch a 400 response in jQuery getJSON call

希望這可以幫助任何人得到這個點。

來源

2017-04-15 13:31:51 Morrtz

javascript加載屏幕，直到數據加載

回答

相關問題