Jquery移动关闭加载图标问题_Jquery_Mobile

Jquery移动关闭加载图标问题

jquery mobile

Jquery移动关闭加载图标问题,jquery,mobile,Jquery,Mobile,女士们先生们，大家好我最近将我的网站移植到jquerymobile上，经过几个小时的修改，我的桌面网站适合更小的屏幕，一切都很顺利。我的问题是加载页面微调器，我可以让微调器按照我的意愿加载和显示。我使用$document.readyfunction，然后添加了$mobile.loading'show'；在里面，我的问题是，一旦页面加载完毕，它就会消失，从我认为mobileinit会起作用的文档中，但它似乎失败了。下面是我正在使用的代码的一个简单演示 <!DOCTYPE html>

女士们先生们，大家好

我最近将我的网站移植到jquerymobile上，经过几个小时的修改，我的桌面网站适合更小的屏幕，一切都很顺利。我的问题是加载页面微调器，我可以让微调器按照我的意愿加载和显示。我使用$document.readyfunction，然后添加了$mobile.loading'show'；在里面，我的问题是，一旦页面加载完毕，它就会消失，从我认为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>

提前感谢

需要进行几项更改

如果您正在使用旧的jQuery库，请将它们更新到最新的稳定版本。加载脚本的顺序很重要，如下所示。包括jquery.min.js。添加mobileinit事件脚本片段此位置对于mobileinit事件处理程序定义非常重要。包括“jQuery.mobile.min.js”` 添加dom就绪脚本片段。 HTML:

html注释使用JS注释，在第//How do…，行中，除此之外，我没有发现任何错误，我认为mobileinit事件没有firing@VenkataPanga谢谢你有什么想法为什么会这样？感谢您的回复。添加的答案应该会有所帮助！，jquery库需要更新，并更改脚本块的顺序。再次感谢您，我试图修改代码，但微调器现在无法加载。我会用你的建议把事情搞得一团糟，看看我能不能解决这个问题。感谢您的努力。在JQM.js之后更新了dom ready loading'show'，并添加了1秒延迟以隐藏mobileinit处理程序中的函数，我现在测试了它的工作。很抱歉，第一个版本我没有完全测试，在mobileinit事件触发时查找。这一次，我们添加了延迟时间以查看效果。对于非ajax调用的完整页面加载，当页面上没有内容时，很难看到加载程序。

<!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>