jquery - 使用 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 1.4 中，您将拥有更少的生成元素，并且可以选择告诉 JQM，哪些小部件是预增强的)，但仍然可以完成，尽管需要一些小部件重写。

此外，根据我在您的代码中看到的内容，您的问题应该是，iOS 启动图像在需要时消失(= 在 JQM 初始化之前)与您控制它并在 JQM 完成时隐藏它。

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

这是它的工作原理:

• 在正文中添加一类splash。 CSS:before 全白背景(...正在加载)
• 通过 CSS 或 Javascript 添加可选的背景图片(不能使用 jQuery 或 JQM，因为它必须在 解析之前运行)
• 从正文中删除 pageshow 上的 splash。由于您始终停留在最先加载的页面上(除非您使用 rel="external"，body 仍然存在，因此您可以安全地将类添加到所有页面并它只会在用户加载的第一页上运行掩饰。

这会隐藏您在 JQM 完成时设置的任何启动屏幕，因此您不会看到白屏。此外，它可以跨浏览器工作(与 iOS 启动图像相比)并且可以轻松地用于不同的图像尺寸(尝试使用不同设备和纵向/横向的第二个应用程序)。

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