7

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

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

4

3 回答 3

10

您正在谈论的白屏来自在 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全白背景（...加载中）
  • 通过 CSS 或 Javascript 添加可选的背景图像（没有 jQuery 或 JQM，因为它必须在解析之前运行）
  • splash从正文中删除页面显示。由于您始终停留在您首先加载的页面上（除非您使用rel="external"，否则将body持续存在，因此您可以安全地将该类添加到您的所有页面中，并且它只会在用户加载的第一页上运行覆盖。

这会隐藏您在 JQM 完成时设置的任何启动屏幕，因此您不会有白屏。此外，它可以跨浏览器工作（与 iOS 启动图像相比），并且可以轻松地与不同的图像大小一起使用（尝试使用不同设备和肖像/风景的第二个应用程序）。

如果您想要完整的代码示例，请告诉我。

于 2013-08-07T18:58:30.683 回答
1

我想更多信息在这里..

  • 加载页面和登陆页面是同一个项目的一部分吗？

  • 你能让你在加载屏幕和登陆页面之间没有完全刷新吗？

其他建议：

  • 如果加载和登陆屏幕都属于同一个项目（域），请尝试使用 changePage ( http://api.jquerymobile.com/jQuery.mobile.changePage/ ) 从加载中调用登陆页面。以这种方式，加载图标应该保持不变。

  • 你可以指向一个新的登陆页面，看看这个白屏是否不显示。这个登录页面可能有问题。

于 2013-08-04T17:09:27.483 回答
0 
$(function(){
    setTimeout(hideSplash, 2000);
});

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

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

于 2013-12-06T23:32:31.797 回答