JQUERY

Question

我正在为Android和iPhone应用程序使用jQueryMobile（ 1.3.1 ）和Phonegap（ 2.7.0 ）。目前我正面临与Preloader Image相关的问题。我使用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);
});

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

在这种情况下，我没有得到确切的问题。

我的Preloader ... enter image description here

200ms之后看起来像（在更改页面之前..） enter image description here

我已经使用jQueryMobile Preloader进行了检查，但它也像我的自定义预加载器一样。

我知道使用setTimeout函数会影响我的应用程序的性能，但是我被迫使用它来使预加载器工作。我认为这可能是因为一个小问题而发生的......但我不知道为什么会发生这种情况。我已经失去了很多宝贵的时间来解决这个问题。

请帮助..

Answer 1

如果您想要自定义加载，请在..

下替换JQM默认加载gif

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

然后，调用此show / hide脚本。

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

不要删除它，让它永远在那里，像JQM一样显示和隐藏。

Answer 2

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

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

JQUERY

$("#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 -->

Answer 3

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

预加载器Gif-Image卡在移动应用程序中

3 个答案:

JQUERY

HTML