如何为 windows8 应用程序制作加载动画

Question

我有一个通过 javascript、css 和 html 制作的 windows8 应用程序，它显示一个 rss 提要。 有时，加载此提要可能需要 2-10 秒，这对我来说不是问题，但对于需要该应用程序的人来说，他们想知道它正在加载而不是冻结。 我有一个动画加载动画 (GIF)，但我不知道如何在 rss 加载它时显示它。 有任何想法吗？感谢您的宝贵时间。

这是主要的javascript，

(function () {
"use strict";

  WinJS.Binding.optimizeBindingReferences = true;

  var app = WinJS.Application;
  var activation = Windows.ApplicationModel.Activation;
  var articlesList;

  app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
            // TODO: This application has been newly launched. Initialize
            // your application here.
        } else {
            // TODO: This application has been reactivated from suspension.
            // Restore application state here.
        }

        articlesList = new WinJS.Binding.List();
        var publicMembers = { ItemList: articlesList };
        WinJS.Namespace.define("C9Data", publicMembers);

        args.setPromise(WinJS.UI.processAll().then(downloadC9BlogFeed));
      }
  };

  function downloadC9BlogFeed() {
    WinJS.xhr({ url: "http://channel9.msdn.com/coding4fun/articles/RSS" }).then(function (rss) {  // this is where it is calling the RSS
      var items = rss.responseXML.querySelectorAll("item");

      for (var n = 0; n < items.length; n++) {
        var article = {};
        article.title = items[n].querySelector("title").textContent;
        var thumbs = items[n].querySelectorAll("thumbnail");
        if (thumbs.length > 1) {
          article.thumbnail = thumbs[1].attributes.getNamedItem("url").textContent;
          article.content = items[n].textContent;
          articlesList.push(article);
        }
      }
    });
  }

  app.oncheckpoint = function (args) {
    // TODO: This application is about to be suspended. Save any state
    // that needs to persist across suspensions here. You might use the
    // WinJS.Application.sessionState object, which is automatically
    // saved and restored across suspension. If you need to complete an
    // asynchronous operation before your application is suspended, call
    // args.setPromise().
  };

  app.start();
})();

Answer 1

@mleroy 已经描述了加载它的正确方法。伪代码（CoffeeScript）：

downloadC9BlogFeed = () ->
  listView.style.display = 'none'
  placeholderAnimation.style.display = 'block'
  WinJS.xhr(url)
  .then (rss) ->
    items = rss.responseXML.querySelectorAll("item")
    items.forEach (item) ->
       [process the item without having to use items[n] multiple times]
  .then () ->
    placeholderAnimation.style.display = 'none'
    listView.style.display = 'block'