使用jQuery Mobile加载时的白页

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完成时隐藏它.

所以:使用其他一些掩盖方式,如自定义启动屏幕
例如,我正在做这个或这个.两个应用程序都加载了requireJS并使用我编写的自定义启动脚本(在用iOS启动图像拉出头发之后).

下面是它的工作原理:

• 添加一类splash到身体.CSS:before全白色背景(... loading)
• 通过CSS或Javascript添加可选的背景图像(没有jQuery或JQM,因为它必须在解析之前运行)
• splash从正文中删除页面显示.由于您始终保留在首先加载的页面上(除非您使用rel="external",否则body保留,因此您可以安全地将类添加到您的所有页面,它只会在用户加载的第一页上运行掩盖.

这隐藏了JQM完成时设置的任何启动屏幕,因此您不会有白屏.此外,它可以跨浏览器工作(与iOS启动映像相比),并且可以轻松地与不同的图像大小一起使用(尝试使用不同设备和视图/横向的第二个应用程序).

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