在从服务器获得JSON响应之前，如何制作jQuery移动节目页面加载动画？

Question

我使用PhoneGap + jQueryMobile + Mustache JS为移动设备创建应用程序。

为了确保应用程序具有响应性并且在离线模式下工作量最小，我将在应用程序中打包Html，图像，CSS和JS文件。但是，应用程序需要与远程服务器进行交互，并根据其JSON响应动态呈现网页。

实际上html资产有Mustache标记，远程JSON响应被送入Mustache JS来替换标记。

所以，我认为是听pagebeforeload并使用event.preventDefault()来阻止jQM执行任务本身。以下是代码： -

function pageLoader(event, pdata) {

    if ($(window).data(pdata.dataUrl + '-suppress')) {  // <---- UGLY HACK to prevent this from getting called the 2nd time.
        $(window).removeData(pdata.dataUrl + '-suppress');
        return;
    }

    event.preventDefault();

    $.getJSON(
            'http://myserver/json',
            {
                src : pdata.dataUrl
            },
            function(data, textStatus, jqXHR) {

                if (data.success) {
                    $(window).data(pdata.dataUrl + '-suppress', true);

                    $.mobile.loadPage(pdata.absUrl, pdata.options).done(
                            function(url, options, newPage, dupCachedPage) {
                                newPage.html(Mustache.render(
                                        newPage.html(), data.view));

                                pdata.deferred.resolve(url, options,
                                        newPage, dupCachedPage);
                            }).fail(function(url, options) {
                        pdata.deferred.reject(url, options);
                    });

                } else {
                    pdata.deferred.reject(pdata.dataUrl, pdata.options);
                }

            }).fail(function() {
        pdata.deferred.reject(pdata.dataUrl, pdata.options);
    });
}

以上代码的作用

以上代码可防止默认页面加载操作。然后它发出JSON请求。当响应到来时，然后使用$.mobile.loadPage加载实际的html页面。之后，它将JSON响应+ html传递给Mustache以获取最终的html，然后将其再次插入到DOM中。最后，它调用延迟对象让jQM知道我们已经完成加载页面。

我想修复上述方法中的问题

1. 当索引页面呈现时，不会调用此方法，因此在没有Mustache的情况下呈现页面。我没有看到任何方法让jQM继续显示加载消息，直到我完成加载JSON并重新呈现html。
2. 当我手动调用时，我正在使用一个丑陋的黑客来阻止我的事件监听器被loadPage再次调用。我正在使用loadPage而不是$.ajax()，因为该方法提供了更多功能，例如仅解析data-role="page"部分中的部分页面并仅在其中执行脚本。如果将该方法作为辅助函数公开，那就太好了。

Answer 1

您需要的是.ajaxSend（）侦听器。它将为每个Ajax调用填充一个全局事件监听器 - 就像你的getJSON一样。

char[] digits = "0123456789".ToCharArray();
IEnumerable<char> myChars = myString; // needed to avoid that String.Concat will be used
var infiniteDigits = Enumerable.Repeat(digits, int.MaxValue).SelectMany(arr => arr);
if (myString.Length < 50)
    myString = String.Concat(myChars.Concat(infiniteDigits).Take(50));