在数据加载之前，我如何才能拥有 jQuery 移动微调器？

Question

编辑： 我特别想要一个与 jQuery Mobile 一起使用的解决方案。 jQuery Mobile 有特定的方法（据我所知）可以完全做我想做的事。我不想要带有旋转 gif 的普通 Javascript。这不是我发布这个问题的原因。任何接受的答案都将涉及 jQuery Mobile 或向我解释为什么这是不可能的或者为什么我不应该使用 jQuery Mobile 来实现此功能（假设 jQuery Mobile 已经加载到我的申请页面）

我有这段代码，我尝试了各种不同的方法来让 jQuery 移动微调器在 PhoneGap 中工作，但完全没有成功。我最近的尝试是这样的：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, user-scalable=no">
        <link rel="stylesheet" href="css/themes/random.min.css" />
        <link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
        <link rel="stylesheet" href="js/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css" />
        <link rel="stylesheet" href="css/styles.css" />
        <title>Reddit</title>
        <script>
            $.mobile.showPageLoadingMsg();
            $.mobile.loading('show');
        </script>
        <script src="js/jquery-1.11.2/jquery-1.11.2.min.js"></script> 
        <script src="js/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script> 
        <script src="js/random.js"></script>
    </head>
    <body>
        <div data-role="page" id="page1">
            <div role="main" class="ui-content">

                <h2>Subreddit Name</h2>
                <div id="output"></div>
            </div>
        </div>
        <script src="js/snoocore/Snoocore-standalone.js"></script>
        <script type="text/javascript">
            (function() {
                var reddit = new window.Snoocore({
                    userAgent: 'App Name',
                    login: {username: 'username', password: 'password'}
                });
                reddit.login();
    // Get information about a slice of a listing:
                function printSlice(slice) {
                    slice.stickied.forEach(function(item, i) {
                        var div = document.getElementById('output');
                        var p = document.createElement("p");
                        var ahref = document.createElement("a");
                        ahref.setAttribute("href", "redditarticle.html?link=" + item.data.id);
                        ahref.innerHTML = '**STICKY**' + item.data.title;
                        p.appendChild(ahref);
                        div.appendChild(p);
                    });
                    slice.children.forEach(function(child, i) {
                        var div = document.getElementById('output');
                        //div.setAttribute("")
                        var p = document.createElement("p");
                        var ahref = document.createElement("a");
                        ahref.setAttribute("href", "redditarticle.html?link=" + child.data.id);
                        ahref.innerHTML = child.data.title;
                        p.appendChild(ahref);
                        div.appendChild(p);
                    });
                }
                function getAll() {
                    var children = [];
                    function handleSlice(slice) {
                        if (slice.empty) {
                            return children;
                        }
                        printSlice(slice);
                        children = children.concat(slice.children);
                        if (slice.count > 1) {
                            return;
                        }
                        else {
                            return slice.next().then(handleSlice);
                        }
                    }
                    return reddit('/r/subreddit/hot').listing({
                        limit: 25,
                    }).then(handleSlice);
                }
                getAll().done();
            })();
        </script>
    </body>
</html>

我想显示一个加载图标，直到脚本可以从 Reddit 中提取数据。

我该如何做到这一点？我试过在 mobileinit 上做事，我试过在 pagecreate 和 pagebeforecreate 上做事，但都没有成功。

我想要的只是一个简单的移动微调器。

Answer 1

使用在页面完全加载时淡出的叠加层。
HTML

 <div id="loadingOverlay">
     <img src="pageload.gif" alt="The page is loading" />
     Please Wait
 </div>

脚本

 $(window).load(function(){
        $('#loadingOverlay').fadeOut();
    });

Answer 2

与纯 javascript、html 和 css:

html:

<div id="loader">
</div>

CSS:

#loader {
position:fixed;
z-index:9999;
min-width:100%;
min-height:100%;
background-color: green;
background-image:url('urlToGifAnimation');
background-position: center;
background-size: 50px 50px;
background-repeat: no-repeat;
top:0;
left:0;
}

javascript:

window.onload = function(){
//Hide loader
var loader = document.getElementById("loader");
loader.style.opcaity=0;
loader.style.display='none';
}

window.onload 在加载所有内容之前不会触发（dom，图片...）

您不需要任何 jquery，如果有 javascript 解决方案可用，则不建议使用。

Answer 3

jquery 移动装载机的工作方式如下：http://jsfiddle.net/9ybagLpb/2/

尝试删除以下内容：

   <script>
        $.mobile.showPageLoadingMsg();
        $.mobile.loading('show');
   </script>

并将您的脚本更新为：

 (function () {
    setTimeout(function(){
        $.mobile.loading('show');
    },1);  

    var reddit = new window.Snoocore({
        userAgent: 'App Name',
        login: {
            username: 'username',
            password: 'password'
        }
    });
    reddit.login();
    // Get information about a slice of a listing:
    function printSlice(slice) {
        slice.stickied.forEach(function (item, i) {
            var div = document.getElementById('output');
            var p = document.createElement("p");
            var ahref = document.createElement("a");
            ahref.setAttribute("href", "redditarticle.html?link=" + item.data.id);
            ahref.innerHTML = '**STICKY**' + item.data.title;
            p.appendChild(ahref);
            div.appendChild(p);
        });
        slice.children.forEach(function (child, i) {
            var div = document.getElementById('output');
            //div.setAttribute("")
            var p = document.createElement("p");
            var ahref = document.createElement("a");
            ahref.setAttribute("href", "redditarticle.html?link=" + child.data.id);
            ahref.innerHTML = child.data.title;
            p.appendChild(ahref);
            div.appendChild(p);
        });
    }

    function getAll() {
        var children = [];

        function handleSlice(slice) {
            if (slice.empty) {
                return children;
            }
            printSlice(slice);
            children = children.concat(slice.children);
            if (slice.count > 1) {
                return;
            } else {
                return slice.next().then(handleSlice);
            }
        }
        return reddit('/r/subreddit/hot').listing({
            limit: 25,
        }).then(handleSlice);
    }
    getAll().done(function () {
        setTimeout(function(){
            $.mobile.loading('hide');
        },1);  
    });
})();

注意 Web-kit 浏览器在 jQuery 移动加载程序的编程执行方面存在问题，如此处所述 $.mobile.showPageLoadingMsg() is not working

希望对您有所帮助！

在数据加载之前，我如何才能拥有 jQuery 移动微调器？

How can I have a jQuery mobile spinner until data loads?

html

javascript

jquery

jquery-mobile