在页面完全加载到 jquery mobile 之前不要隐藏加载器 [英] don't hide loader till the page loads completely in jquery mobile

查看：23
本文介绍了在页面完全加载到 jquery mobile 之前不要隐藏加载器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试显示页面加载小部件，直到页面完全加载，之后它应该隐藏......并且每次我点击任何锚点以传输到下一页时都执行此过程..

支持我有三页...

<div data-role="page" id="home">....</div><div data-role="page" id="about">....</div><div data-role="page" id="contact">....</div>

我正在使用的脚本:-

$(document).on("pagecreate", function(event) {//alert("Take It Show");$( ".ui-loader" ).loading( "隐藏" );});

是否可以将 data-transition="slide" 之类的过渡添加到任何锚点或在其中使用 data-ajax="false"...??

解决方案

工作示例:http://jsfiddle.净/Gajotres/Zr7Gf/

基本上底层的 javascript 就是你所需要的.

HTML:

<头><title>jQM Complex Demo</title><meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/><link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/><script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script><身体><div data-role="page" id="index"><div data-theme="a" data-role="header"><h3>第一页<a href="#second" class="ui-btn-right">下一步</a>

<div data-role="内容">

<div data-theme="a" data-role="footer" data-position="fixed">

<div data-role="page" id="second"><div data-theme="a" data-role="header"><h3>第一页<a href="#index" class="ui-btn-left">返回</a>

<div data-role="内容">

<div data-theme="a" data-role="footer" data-position="fixed">

Javascript: 

$(document).on('pagebeforecreate', '[data-role="page"]', function(){var 间隔 = setInterval(function(){$.mobile.loading('show');清除间隔(间隔)；},1);});$(document).on('pageshow', '[data-role="page"]', function(){var 间隔 = setInterval(function(){$.mobile.loading('隐藏');清除间隔(间隔)；},300);});

i am trying to show the page loading widget till the page loads completely, after that it should hide... and do this process every time i punch any anchor to transmit into next page..

Support i have three pages...

<div data-role="page" id="home">....</div>
<div data-role="page" id="about">....</div>
<div data-role="page" id="contact">....</div>

Script on this i am using:-

$(document).on("pagecreate", function(event) { 
    //alert("Take It Show");
    $( ".ui-loader" ).loading( "hide" );
});

Is it possible to add transition like data-transition="slide" to the any anchor or use data-ajax="false" in it...??

解决方案

Working example: http://jsfiddle.net/Gajotres/Zr7Gf/

Basically javascript from the bottom is all you need.

HTML :

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="#second" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">

        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>    
    <div data-role="page" id="second">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="#index" class="ui-btn-left">Back</a>
        </div>

        <div data-role="content">

        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>     
</body>
</html>

Javascript : 

$(document).on('pagebeforecreate', '[data-role="page"]', function(){     
    var interval = setInterval(function(){
        $.mobile.loading('show');
        clearInterval(interval);
    },1);    
});

$(document).on('pageshow', '[data-role="page"]', function(){  
    var interval = setInterval(function(){
        $.mobile.loading('hide');
        clearInterval(interval);
    },300);      
});

这篇关于在页面完全加载到 jquery mobile 之前不要隐藏加载器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆