0

我的问题是在 2 个单独的 html 页面名称 index.html 和 mainpage.html 之间的转换之间出现白屏。任何人都可以请这个dissapear。我已经放入了jquery函数来淡入淡出！代码如下：

PS：我使用的是windows phone 7模拟器！

HTML：

    <a  id="loginbtn" data-role="button" href="MainPage.html" 
style="margin-left: 60px;" class="ui-btn-up-a"> Log in</a>

查询：

 $(document).ready(function () {
        $("body").css("display", "none");
        $("body").fadeIn(3000);

        $("a#loginbtn").click(function (event) {
            event.preventDefault();
            linkLocation = this.href;
            $("body").fadeOut(200, redirectPage);
        });

        function redirectPage() {
            window.location = linkLocation;
        }
    });

我一直在以下链接，但我对使用 Cordova/PhoneGap 非常陌生，所以我不明白，也许有人向我解释会很有帮助！

链接：

Github 论坛

Github 论坛 - “答案”

淡出有效，淡入！但在淡出后出现白屏并加载新页面。

使用：HTML5/CSS/Javascript/Jquerymobile/Jquery.1.7/JqueryMobile.1.2.0

提前致谢

4

4 回答 4

1

One of the benefits of using jquery mobile is to have access to its built-in transitions. Instead of manually doing a fade out fade in, you should instead change page by either:

  • Simply linking to the target page: JQM allows you to define a transition in a simple link, using the following syntax <a href="mainpage.html" data-transition="fade">link</a>. No additional js involved, jqm handles everything, as described and shown here

  • Using the $.mobile.changePage() jquery mobile method (in place of setting window.location) and specify the "transition" parameter to the value you want.You do not need to add fade effects manually You can find more details here.

于 2012-10-30T14:31:02.367 回答
1

Part of the problem is using document.location and efectively restarting the app as Romain pointed out. However, after fixing that, you will still get a blank page but for a different reason.

By default, jquery mobile transitions after 1.1 are sequential (aka horribly broken) - page one fades out, leaving the default white background, then page two fades in. You need to replace the transition handler to get a nice crossfade.

https://github.com/watusi/jquery.mobile.simultaneous-transitions

于 2012-11-16T08:02:32.273 回答
0

Bypassing the jquery mobile etc, maybe including a background color to your body or html could solve your problem quite easily. Not sure how your design is supposed to be, so feel free to vote my answer down :)

于 2012-10-30T11:04:29.483 回答
0

Here's a little snippet from CSS-Tricks which allegedly gets rid of IE page flicker:

<!-- Stop IE page flicker -->
<!--[if IE]>
    <meta http-equiv="Page-Enter" content="blendTrans(duration=0)" />
    <meta http-equiv="Page-Exit" content="blendTrans(duration=0)" />
<![endif]-->

Not sure if it applies to mobile as well as desktop, but it's worth a shot.

于 2012-10-30T11:10:56.773 回答