0

我在 jQueryMobile( 1.3.1 ) 和 Phonegap(为 Android 和 iPhone 应用程序使用 2.7.0 )。目前正面临与预加载器图像相关的问题。我正在使用 Gif 图像作为预加载器。

我正在为预加载器功能使用自定义函数：showLoading()

function showLoading()
{
  $("body").append("<div id='overlay'></div><img src='images/loading.gif' id='loader_image'/> ");
}

要隐藏预加载器，请使用另一个函数：hideLoading()

function hideLoading()
{
  $("#overlay,#loader_image").remove();
}

我的问题是当我尝试从一个页面移动到另一个页面时，当像单击按钮一样触发事件时，预加载器没有动画。

   $("#menubooking,#booking").on('click',function(event){
    showLoading();

    $.mobile.changePage( "#mobile_page_form_bookacar", {reverse: false,  changeHash: true});
    event.preventDefault();

});

因此，我使用setTimeout 函数（） 让它工作。

我的代码现在看起来像：

 $("#menubooking,#booking").on('click',function(event){
    showLoading();
    setTimeout(function(){ 
    $.mobile.changePage( "#mobile_page_form_bookacar", {reverse: false,  changeHash: true});
    event.preventDefault();
    },200);
});

现在我的预加载器可以工作了，但是预加载器图像会在 200 毫秒后粘住（不是动画），它看起来像一个普通的 jpg 图像。当我点击一个按钮时，我的预加载器工作了 200 毫秒，然后就卡住了。不过，其他功能运行顺利：下一页的 API 调用以及其他所有功能。

在这种情况下，我不明白确切的问题是什么。

我的预载... 在此处输入图像描述

200 毫秒后它看起来像（在更改页面之前..） 在此处输入图像描述

我已经检查了 jQueryMobile Preloader 但它也像我的自定义预加载器一样坚持。

我知道使用 setTimeout 函数会影响我的应用程序的性能，但我不得不使用它来让预加载器工作。我认为这可能是因为一个小问题而发生的……但我不明白为什么会这样。我已经浪费了很多宝贵的时间来尝试解决这个问题。

请帮忙..

4

3 回答 3

1

如果您想要自定义加载，请替换 JQM 默认加载 gif 下..

yourFolder\css\themes\default\images\ajax-loader.gif使用您的 gif，将您的 gif 重命名为ajax-loader.gif.

然后，调用此显示/隐藏脚本。

$(".ui-loader").show();
// ...
$(".ui-loader").hide();

不要删除它，让它一直存在，就像 JQM 那样显示和隐藏。

于 2013-06-21T04:27:53.137 回答
0

我尝试了 CSS3 动画而不是 Gif 图像，我的问题解决了！！

于 2013-08-12T09:50:04.280 回答
0

好的，添加了另一个答案，尝试在页面显示后隐藏加载程序，而不是 setTimeout。

在此处查看演示http://jsfiddle.net/yeyene/CVv2q/3/

查询

$("#btn_id").on('vclick', function(e){
    $(".ui-loader").show();
    $.mobile.changePage( "#page2", {reverse: false,  changeHash: true});
});
$( "#page2" ).on( "pageshow", function( event, ui ) {
    $(".ui-loader").hide();  
});

HTML

<div data-role="page">
    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div data-role="content">
        <p>Page content goes here.</p>
        <button id="btn_id">Go to Page 2</button>
    </div><!-- /content -->

    <div data-role="footer" data-position="fixed">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

<div id="page2" data-role="page">
    <div data-role="header">
        <h1>Page 2</h1>
    </div><!-- /header -->

    <div data-role="content">
        <p>Page content goes here.</p>
    </div><!-- /content -->

    <div data-role="footer" data-position="fixed">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->
于 2013-06-21T06:47:02.630 回答