Question

嗨女士们，先生们

我最近将我的网站移植到jquery mobile，经过几个小时的重写我的桌面网站以适应更小的屏幕一切顺利。我的问题是加载页面微调器从几个小时的乱码我可以得到微调器加载和显示我希望。我使用了$（document）.ready（function（）然后添加了$ .mobile.loading（'show'）;里面按预期加载但是我的问题是在页面加载后让它消失，从docs我认为mobileinit可以做到这一点，但似乎失败。这是我正在使用的代码的简单演示。

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Page Title</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

        <script src="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.js"></script>
        <script>
$(document).ready(function() {          
$.mobile.loading( 'show', {
    text: 'Loading',
    textVisible: true,
    theme: 'z',
    html: ""    
});
});

<!---- How do I stop the spinner after page has loaded ? Docs state mobileinit = Event indicating that jQuery Mobile has finished loading.--------------->
$( document ).on( "mobileinit", function() {
$.mobile.loading( 'hide');
});

        </script>
    </head> 

    <body>
        <!-- /page -->
        <div data-role="page">
            <!-- /header -->
            <div data-role="header">
                <h1>Testing loader</h1>
            </div>
            <!-- /content -->
            <div data-role="content">
            </div>
        </div>
    </body>
</html>

提前致谢

Answer 1

需要做出一些改变！

您正在使用旧的jQuery库，将它们更新为最新的稳定版本。
加载脚本的顺序如下所示。
1. 包括jquery.min.js。
2. 添加mobileinit event script fragment这个地方对于mobileinit事件处理程序定义非常重要。
3. 包含'jQuery.mobile.min.js`
4. 添加dom-ready脚本片段。

<强> HTML：

<!DOCTYPE html> 
<html>
<head>
    <title>Page Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
        $(document).on("mobileinit", function () {
            setTimeout(function () {
                $.mobile.loading('hide');
            }, 1000);
        });
    </script>
    <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
    <script>
        $(document).ready(function () {
            $.mobile.loading('show', {
                text: 'Loading',
                textVisible: true,
                theme: 'z',
                html: ""
            });
        });
    </script>
</head>
<body>
    <!-- /page -->
    <div data-role="page">
        <!-- /header -->
        <div data-role="header">
            <h1>Testing loader</h1>
        </div>
        <!-- /content -->
        <div data-role="content">
        </div>
    </div>
</body>
</html>

Jquery Mobile关闭加载图标问题

1 个答案: