材質CSS-頁面加載后停止預加載器

Question

我正在與MaterialCSS玩耍，並想使用它們提供的preloader類，尤其是Liner Determinate類 。 使用它非常簡單，因為我可以將其添加到頁面頂部：

  <div class="progress">
      <div class="determinate" id="loader" onload="progbar();"></div>
  </div>

我嘗試一起破解一些JavaScript（我對jquery不了解）以使用此動態更新寬度：

function progbar() {
  for (i = 1; i = 100; i++) { 
    document.getElementById("loader").style.width = i;
  }
}

但是，這項工作（即看起來像width=0 ）。 我只是想讓進度條從0-100加載，並使其在頁面加載時消失。 朝正確方向輕推將不勝感激

Answer 1

我認為您正在尋找以下內容

1. 一個簡單的基本html頁面，可使用加載程序快速呈現
2. 異步加載您的應用程序代碼
3. 應用程序代碼完成加載后，將加載程序替換為呈現的應用程序。

這是一個模擬，使其更加清晰

 // simulate async loading of your app scripts... setTimeout(appReady, 2000); function appReady() { let appContainer = document.getElementById("appContainer"); while (appContainer.firstChild) { appContainer.removeChild(appContainer.firstChild); } let app = document.createElement("div"); app.textContent = "your app"; appContainer.appendChild(app); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet" /> <div id="appContainer"> <div class="progress"> <div class="indeterminate"></div> </div> </div> 

Answer 2

從物化文檔看來， i將需要為i +百分比/像素/ em。 目前，這只是一個數字。

另外，您的for循環可能應該是：

function progbar() {
  for (i = 0; i < 100; i++) {
    document.getElementById("loader").style.width = i + 'px';
  }
}