文章/答案/技术大牛

发布

社区首页 >问答首页 >在加载数据之前，我如何使用jQuery移动旋转器？

问在加载数据之前，我如何使用jQuery移动旋转器？
EN

Stack Overflow用户

提问于 2015-02-23 14:00:58

回答 3查看 1.5K关注 0票数 2

编辑：--我特别想要一个与jQuery移动一起工作的解决方案。jQuery移动有特定的方法(据我理解)来做我想做的事情。我不想要普通的Javascript和旋转的gif。这不是我发这个问题的原因。任何被接受的答案都将涉及到jQuery移动，或者向我解释为什么这是不可能的，或者为什么我不想使用jQuery移动来实现这个功能(假设jQuery移动已经加载到我的应用程序的页面上)

我有这段代码，我尝试过各种不同的方法让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中提取数据。

我怎样才能做到这一点？我试着在手机上做一些事情，我试着在页面和页面上做一些事情，但是没有任何结果。

我只想要一个简单的移动纺纱机。

html

jquery-mobile

javascript

jquery

回答 3

Stack Overflow用户

回答已采纳

发布于 2015-02-27 13:34:36

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浏览器在jQuery移动加载程序的编程执行方面存在问题，如这里所解释的$.mobile.showPageLoadingMsg() is not working

希望这能帮上忙！

票数 1

Stack Overflow用户

发布于 2015-02-23 14:17:25

使用在页面完全加载时已褪色的覆盖。

HTML

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

脚本

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

票数 1

Stack Overflow用户

发布于 2015-02-25 20:14:27

使用纯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不会触发(多姆、图像.)

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/28675496

复制

相似问题

问在加载数据之前，我如何使用jQuery移动旋转器？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在加载数据之前，我如何使用jQuery移动旋转器？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在加载数据之前，我如何使用jQuery移动旋转器？
EN