Question

如何在文档准备好时显示加载程序。上面的代码没有做任何事情。

$(document).bind("pageinit", function() {
   $.mobile.loading("show");             
});

Answer 1

这可能会帮助你！ JS FIddle Help

JavaScript代码

$(document).on('pagebeforeshow', '#index', function(){       

});

$(document).on('pagebeforeshow', '#second', function(){       

});

HTML代码

<!DOCTYPE html>
    <html>
        <head>
            <title>jQM Complex Demo</title>
            <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
            <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
            <style>

                .ui-loader-default {
                    opacity: 1 !important;      
                }

                .custom-spinner {
                    width: 37px !important;
                    height: 37px !important;
                    background-image:url('http://pictures.reuters.com/ClientFiles/RTR/Images/ajax-loader.gif');
                    display: block;
                }
            </style>
            <script type="text/javascript" src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
            <script>
                $( document ).bind( 'mobileinit', function(){
                    $.mobile.loader.prototype.options.text = "loading";
                    $.mobile.loader.prototype.options.textVisible = false;
                    $.mobile.loader.prototype.options.theme = "a";
                    $.mobile.loader.prototype.options.html = "<div class='custom-spinner'></div>";
                }); 
            </script>       
            <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
            <script>
                $(document).on('pageshow', '#index', function(){        
                    $.mobile.loading( 'show');          
                }); 
            </script>
        </head>
        <body>
            <div data-role="page" id="index">
                <div data-theme="a" data-role="header">
                    <h3>
                        First Page
                    </h3>
                    <a href="#second" class="ui-btn-right">Next</a>
                </div>

                <div data-role="content">

                </div>

                <div data-theme="a" data-role="footer" data-position="fixed">

                </div>
            </div> 
        </body>
    </html>

Answer 2

<强> HTML

<div id="spinner" style="display: none;">
<span id="ss" style="float: left; margin-left: 50% !Important; margin-top: 22% !Important;">
<img src="ajax-pink-loader.gif" alt="Loading..." />
</span>
</div>
<asp:Button ID="ssubmit" runat="server" Text="Search" OnClick="submit_Click1" />

<强> JQUERY

$("#ssubmit").click(function () {
$("#spinner").show();
setInterval(function () {
$("#spinner").hide();
}, 20000);
});

<强> CSS

<style type="text/css">
        #spinner
        {
            background: rgb(0, 0, 0);
            background: rgba(0, 0, 0, .5) !important;
            filter: alpha(opacity=60) !important; /* IE */
            -moz-opacity: 0.6 !important; /* Mozilla */
            opacity: 0.6 !important; /* CSS3 */
            top: 0;
            left: 0;
            position: fixed;
            height: 100% !important;
            width: 100% !important;
            _height: expression(document.body.offsetHeight + "px");
            z-index: 9999;
        }
    </style>

在文件准备好显示装载机

2 个答案: