使用 jQuery Mobile 加载时出现白页 [英] White page when loading while using jQuery Mobile

问题描述

我们将 jQuery Mobile 1.3.2 用于 www.tekiki.com 上的移动 HTML5 应用程序.(从 iPhone 上查看，或从桌面上查看 www.tekiki.com/dandy/dandy.)

We're using jQuery Mobile 1.3.2 for a mobile HTML5 app at www.tekiki.com. (Check from an iPhone, or check www.tekiki.com/dandy/dandy from a desktop.)

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

Upon loading, JQM shows a white page between the loading screen and the first page of the app. Are there settings in JQM to repress the loading screen? The closest we found was $.mobile.loading(), but this only pertains to the loading text. We want the whole white screen to vanish, meaning the app should go directly from the loading screen to the first page.

推荐答案

你所谈论的白屏结果来自在 JQM CSS 中声明的这个类:

The white screen you are talking about results from this class declared in JQM CSS:

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

JQM开始初始化时添加类

The class is added when JQM begins to initalize

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

并在第一个 pageshow 中删除.

and removed on the first pageshow.

整个过程是必要的，因为否则您将看到预先增强的标记，直到 JQM 完成呈现它.所以如果你想删除"它，你可以声明:

The whole procedure is necessary, because you would otherwise see the pre-enhanced markup until JQM is done rendering it. So if you want to "remove" it, you could declare:

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

但是您会看到 jQuery Mobile 修改了您的所有源代码.

but you would see all your source code being touched up by jQuery Mobile.

我知道的解决方法:

提供预先增强的标记而不是 JQM 来做
这在 JQM 1.4 之前是一种折磨(在 JQM 1.4 之前，生成的元素将少得多，并且可以选择告诉 JQM，哪些小部件提供了预增强)，但仍然可以完成，尽管需要一些小部件重写.

Supply pre-enhanced markup instead of JQM doing it
This is kind of an ordeal before JQM 1.4 (where you will have much fewer generated elements and the option to tell JQM, which widgets are being provided pre-enhanced), but can be done nevertheless albeit requiring some widget rewriting.

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

Also from what I see in your code, your problem should be, that the iOS startup image disappears when it wants (= before JQM is initialized) vs. you having control over it and hiding it when JQM is done.

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

So: Use some other means of coverup like a custom startup screen
For example, I'm doing this or this. Both applications are loaded with requireJS and use a custom startup script I wrote (after pulling my hair out with iOS startup images).

这是它的工作原理:

• 在正文中添加一类splash.CSS:before 全白背景 (...loading)
• 通过 CSS 或 Javascript 添加可选的背景图像(没有 jQuery 或 JQM，因为它必须在解析之前运行)
• 从正文中删除页面显示上的splash.因为你总是停留在你首先加载的页面上(除非你使用 rel="external"，body 仍然存在，所以你可以安全地将类添加到你的所有页面和它只会在用户加载的第一页上运行coverup.

• add a class of splash to the body. CSS:before a full white background (...loading)
• add optional background image via CSS or Javascript (no jQuery or JQM, because it must run before either is parsed)
• remove splash on pageshow from the body. As you always stay on the page you loaded first (unless you use rel="external", the body persists, so you can safely add the class to all your pages and it will only run the coverup on the first page the user loads.

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

This hides whatever startup screen you set when JQM is done, so you will not have a white screen. Plus it works cross-browser (vs iOS startup image) and can easily be used with different image sizes (try the 2nd application with different devices & portait/landscape).

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

If you want a full code sample, let me know.

这篇关于使用 jQuery Mobile 加载时出现白页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！