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

问题描述

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

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

解决方案

白色屏幕你在谈论在JQM CSS中声明的这个类的结果：

  / * fouc * / 
 .ui - 移动渲染> * {知名度：隐藏; } 
  

当JQM开始使用时，这个类会被添加到

  //将手机，初始加载渲染类加载到docEl 
 $ html.addClass（ui-mobile ui-mobile-rendering）; 
  

并在第一个页面显示上删除。

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

  .ui-mobile-rendering> * {知名度：可见; } 
  

但您会看到所有源代码都被jQuery Mobile修改。

我知道的解决方法：

提供预先增强的标记而不是JQM

这是JQM 1.4之前的一次考验（其中生成的元素少得多，可以选择告诉JQM，哪些小部件提供了预增强），但仍然可以完成，尽管需要重写一些小部件。 / p>

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

因此：使用一些其他方法掩盖自定义启动屏幕

例如，我正在执行< a href =http://www.iaasadvisor.com/ =noreferrer> this or 这个。这两个应用程序都加载了requireJS，并使用我写的自定义启动脚本（在用iOS启动图像拉出头发后）。

以下是它的工作方式：

• 添加一个<$ c类$ c> splash 到正文。 CSS：之前全白背景（...加载）


• 通过CSS或Javascript添加可选背景图像（无jQuery或JQM） ，因为它必须在解析之前运行）


• 从页面正文中移除 splash 页面显示。由于您始终保持在首先加载的页面上（除非您使用 rel =external，否则正文仍然存在，所以你可以安全地将课程添加到你的所有页面，它只会在用户加载的第一页上运行封面。

这个隐藏您在JQM完成时设置的任何启动屏幕，因此您不会有白色屏幕，并且它可以跨浏览器（vs iOS启动图像）工作，并且可以轻松用于不同的图像大小（尝试使用不同设备和放大器的第二个应用程序; portait / landscape）。

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

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.)

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.

解决方案

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

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

The class is added when JQM begins to initalize

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

and removed on the first pageshow.

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; }

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

Workarounds I know:

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.

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.

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).

Here is how it works:

• 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.

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屋！