javascript - 使用backbone.js应用程序实现可视化加载器栏

我的backbone.js应用程序第一次加载时，在加载模板之前会出现整整6秒的空白屏幕。我们的 javascript 库有点膨胀，构建过程还不完美，但这些是单独的问题。

我正在使用带有 require.js 的backbone-boilerplate，我希望有一种 gmail 类型加载器，它会在所有资源、数据、模板加载和渲染时显示出来，所以我们不只是加载的空白页面。

有没有办法做这样的事情？

最佳答案

我解决这个问题的方法是在index.html中包含一个动画旋转GIF:

<html>
  <!-- header with scripts etc -->
  <body>
    <img id="spinner" class="centered" src="/images/spinner.gif"></img>
  </body>
</html>

当所有资源都已下载、模型已初始化并且应用程序的主视图已准备好渲染时，我只需将微调器替换为内容:

var appView = new AppView().render();
$("img#spinner").replaceWith(appView.el);

它本身并不显示进度，但它让用户知道正在加载。

可能有一种方法可以连接到 requirejs 加载事件，但我不知道。如果您计划将所有资源缩小并合并到一个文件中，那么这无论如何都不太有用，因为不可能非常准确地跟踪单个文件的下载进度。

关于javascript - 使用backbone.js应用程序实现可视化加载器栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13938063/

相关文章：

Javascript 当前 url