Question

我们正在www.tekiki.com为移动HTML5应用程序使用jQuery Mobile 1.3.2。（从iPhone上查看，或从桌面上查看www.tekiki.com/dandy/dandy。）

加载后，JQM会在加载屏幕和应用的第一页之间显示一个白页。 JQM中是否有设置来压制加载屏幕？我们找到的最接近的是$.mobile.loading()，但这仅适用于加载文本。我们希望整个白屏消失，这意味着应用应该直接从加载屏幕转到第一页。

Answer 1

您正在讨论的白色屏幕是在JQM CSS中声明的此类的结果：

/*fouc*/
.ui-mobile-rendering > * { visibility: hidden; }

当JQM开始初始化时，该类被添加

// Add mobile, initial load "rendering" classes to docEl
$html.addClass( "ui-mobile ui-mobile-rendering" );

并在第一个pageshow上删除。

整个过程是必要的，因为否则您将看到预增强的标记，直到JQM完成渲染。因此，如果您想“删除”它，您可以声明：

 .ui-mobile-rendering > * { visibility: visible; }

但是你会看到你的所有源代码都被jQuery Mobile搞定了。

我知道的解决方法：

提供预增强型标记而非JQM执行此操作
这是JQM 1.4之前的一种考验（在这种情况下，您将获得更少的生成元素和告诉JQM的选项，哪些小部件是在预先增强的情况下提供的），但尽管需要重写一些小部件，但仍可以完成。

同样从我在你的代码中看到的，你的问题应该是，iOS启动图像在它需要时消失（=在JQM初始化之前），而你可以控制它并在JQM完成时隐藏它。

所以：使用其他一些掩盖方式，如自定义启动屏幕
例如，我正在this或this。两个应用程序都加载了requireJS并使用我编写的自定义启动脚本（在用iOS启动图像拉出头发之后）。

以下是它的工作原理：

在正文中添加splash类。 CSS:before全白背景（... loading）
通过CSS或Javascript添加可选的背景图片（没有jQuery或JQM，因为它必须在解析之前运行）

从正文中删除页面显示中的splash。由于您始终保留在首先加载的页面上（除非您使用rel="external"，body仍然存在，因此您可以安全地将该类添加到您的所有页面，并且它只会在第一页上运行掩盖用户加载。

这隐藏了JQM完成时设置的任何启动画面，因此您不会有白屏。此外，它可以跨浏览器工作（与iOS启动图像相比），并且可以轻松地与不同的图像尺寸一起使用（尝试使用不同设备和视频/横向的第二个应用程序）。

如果您需要完整的代码示例，请与我们联系。

Answer 2

我认为这里有更多信息..

是同一项目的加载和登陆页面的一部分吗？
你可以告诉你加载屏幕和登陆页面之间没有完全刷新吗？

其他建议：

如果加载和登陆屏幕都属于同一个项目（域），请尝试使用changePage（http://api.jquerymobile.com/jQuery.mobile.changePage/）从加载调用登录页面。以这种方式，加载图标应该保持不变。
您可以指向新的目标网页，看看是否显示此白屏。也许这个登陆页面有些不对劲。

Answer 3

$(function(){
    setTimeout(hideSplash, 2000);
});

$(function hideSplash() {
    $.mobile.changePage("*Jquery Mobile Page here*", {
        transition: "slidedown",
        reverse: false,
        changeHash: false
    });
});

将此代码添加到任何内部或外部js文件。

使用jQuery Mobile加载时的白页

3 个答案: