Jquery移动android应用程序中的启动画面答案

【问题标题】：splash screen in Jquery mobile android appJquery移动android应用程序中的启动画面
【发布时间】：2013-11-21 05:36:45
【问题描述】：

我有一个 android 应用程序，它在我的网络中使用 jquery mobile。我的应用程序中有几个页面，当我加载新页面时，我正在考虑在我的应用程序上放置一个启动画面。或在加载页面时。关于如何制作启动画面的任何建议？我是 jquery mobile 的新手，所以我需要建议。我尝试过使用“$.mobile.showPageLoadingMsg()”，但它并没有涵盖我想要的内容，它只显示一条消息，我想要的是一个带有填充整个页面的图像的整体。当页面准备就绪时，启动画面应该会淡出并显示正在加载的页面

这个小提琴是“$.mobile.showPageLoadingMsg()”的一个例子：http://jsfiddle.net/pmatseykanets/Nvrhb/

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

    <script>

    function doWork(){
        //Append a lot of paragraphs
        for (var i = 0; i < 10000; i++) {
            $("div[data-role=content]").append("<p>This is some long string</p>");
        }
        $("div[data-role=content]").trigger("refresh");
        $.mobile.loading('hide');
    }

    $(document).on("pageinit", "#page1", function(){

        $("#btn1").click(function(){

            $.mobile.loading('show', {theme:"e", text:"Please wait...", textonly:true, textVisible: true});

            //Do something lengthy here
            setTimeout(function(){
                doWork();
            }, 50);

        });
    });

    </script>
</head>
<body>
    <div data-role="page" id="page1">
        <div data-role="header">
            <h1>Header</h1>
        </div>

        <div data-role="content">
            <a id="btn1" href="#" data-role="button" data-transition="flip">Do work</a>
        </div>

        <div data-role="footer" data-position="fixed">
            <h1>Footer</h1>
        </div>
    </div>
</body>
</html>

【问题讨论】：

你想要这样的东西吗？ jsfiddle.net/Palestinian/nWWqT
类似的东西 omar..加载页面的东西可以显示几次..就像每次页面发生变化或加载发生时，加载页面显示以及页面准备就绪时加载页面淡出并显示页面？
当然，您可以随时使用$.mobile.loading('show/hide')。
我今天没有时间，但我一定会在明天有时间的时候尝试一下。一如既往地感谢奥马尔
这是一个完整的工作jsfiddle.net/Palestinian/B2fB6，不客气，永远:)

标签： android jquery html jquery-ui jquery-mobile

【解决方案1】：

如果您使用 phonegap（使用 jquery mobile 和 javascript 构建应用程序），那么您只需在主要活动中添加以下内容。

public class MainActivity extends DroidGap {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.setIntegerProperty("splashscreen", R.drawable.splashscreen);
        super.loadUrl("file:///android_asset/www/index.html", 5000);
    }
}

只需将启动页面图像添加到 /drawable 文件夹中即可..

希望它对你有用..

【讨论】：

我试过让它工作，但我的问题是当基于 Web 的应用程序加载并且基于 Web 的应用程序的页面发生更改时，启动画面不起作用我需要一个基于 jquery Web 的应用程序本身中的闪屏感谢您的建议，但非常感谢您的努力