Question

我正在使用MaterialCSS，并希望使用他们提供的预加载器类，尤其是liner Determinate class。使用它非常简单，因为我可以将它添加到我的页面顶部：

  <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;
  }
}

但这个dosnt工作（即看起来像width=0）。我只是试图让一个进度条从0 - 100加载并使其在页面加载时消失。非常感谢正确推动

Answer 1

我认为您正在寻找的是以下

一个简单的基本html页面，可以使用加载器快速呈现
异步加载您的应用程序代码
当您的应用程序代码已完成加载时，请使用您呈现的应用程序替换加载程序。

这是一个模拟，使其更清晰

＆＃13;

// 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);
}

＆＃13;

<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>

＆＃13;

Answer 2

从实体化文档看起来i需要i +百分比/像素/ em。目前它只是一个数字。

另外，你的for循环应该是：

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

Material CSS - 页面加载后停止预加载器

2 个答案: