如何制作Windows8應用程序的加載動畫

Question

我有一個通過javascript，css和html制作的Windows8應用，它顯示rss feed。 有時，此Feed可能需要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'