Question

我将内容从外部html文件加载到div中。它非常简单（尽管我在显示内容时遇到了一些麻烦：jquery mobile - loading content into a div）但是一旦内容被加载（它只是文本），就会有一个小的旋转加载动画屏幕中心不会消失。我不知道JQuery是否正在尝试加载其他东西或什么。

<script>
        $(document).ready(function()
        {
            $('#welcome').click(function(){
                console.log('clicked');
                $('#mainContent').load('welcome.html');
            $('#mainContent').trigger("pagecreate").trigger("refresh");
            });
        });
</script>

Answer 1

我相信在您.trigger('pagecreate')时启动微调器。在任何情况下，您都可以通过运行此函数来停止微调器：

$.mobile.hidePageLoadingMsg();

我会在.load() AJAX请求的回调函数中运行：

    $(document).ready(function()
    {
        $('#welcome').click(function(){
            $('#mainContent').load('welcome.html', function () {
                $(this).trigger("create");
                $.mobile.hidePageLoadingMsg();
            });
        });
    });

您应该阅读jQuery Mobile文档的这一页：http://jquerymobile.com/demos/1.1.0/docs/api/events.html（注意大黄色部分，这些很重要）

您使用的document.ready与jQuery Mobile不相称，建议您对单个伪页面元素使用pageinit事件。

要实际完成这项工作，您应该使用内置的$.mobile.changePage()函数来处理pseueo页面的所有初始化：

    $(document).delegate('#welcome', 'click', function()
    {
        $.mobile.changePage('welcome.html');
    });

您还可以将一些选项传递到$.mobile.changePage()函数中，以下是它们的列表：http://jquerymobile.com/demos/1.1.0/docs/api/methods.html

Answer 2

它可能不是最干净的解决方案，因为您可能正在寻找一种触发事件的方法，导致加载动画自行隐藏，对吗？

但您可以尝试跟踪加载动画的类或ID，并将其隐藏起来：

    $(document).ready(function() {
        $('#welcome').click(function(){
            console.log('clicked');
            $('#mainContent').load('welcome.html', function(){
                $('.loadinganimationclass').hide();
            });
            $('#mainContent').trigger("pagecreate").trigger("refresh");
        });
    });

一旦加载内容，JQuery Mobile就会加载动画

2 个答案: