Question

我有两个单独的html页面名称index.html和mainpage.html之间的过渡之间出现白屏的问题。任何人都可以得到这个dissapear.i已经放入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>

JQuery：

 $(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 Forums

Github Forums - "Answer"

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

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

提前致谢

Answer 1

使用jquery mobile的一个好处是可以访问其内置转换。您应该通过以下任一方式更改页面，而不是手动淡出淡入：

只需链接到目标页面：JQM允许您使用以下语法<a href="mainpage.html" data-transition="fade">link</a>在简单链接中定义转换。没有涉及额外的js，jqm处理所有内容，如所描述和显示here
使用$ .mobile.changePage（）jquery移动方法（代替设置window.location）并将“transition”参数指定为您想要的值。您不需要手动添加淡入淡出效果可以找到更多详细信息here。

Answer 2

部分问题是使用document.location并有效地重新启动应用程序，正如Romain所指出的那样。但是，在修复之后，您仍然会得到一个空白页面，但原因不同。

默认情况下，1.1之后的jquery移动转换是顺序的（又名可怕地破坏） - 第1页淡出，保留默认的白色背景，然后第2页淡入。你需要替换转换处理程序以获得良好的交叉淡入淡出。 / p>

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

Answer 3

绕过jquery mobile等，可能包括你身体的背景颜色或html可以很容易地解决你的问题。不确定你的设计应该如何，所以请随意投票给我答案：）

Answer 4

这是一个来自CSS-Tricks的小片段，据称可以摆脱IE页面闪烁：

<!-- 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]-->

不确定它是否适用于移动设备和桌面设备，但值得一试。

2个html页面之间的白色闪烁

4 个答案: