使用 jQuery Mobile 加载时出现白页答案

【问题标题】：White page when loading while using jQuery Mobile使用 jQuery Mobile 加载时出现白页
【发布时间】：2013-07-31 12:08:56
【问题描述】：

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

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

【问题讨论】：

触发页面，检查body标签关闭前的最后一个div ui-loader。
@Omar，您是否建议使用 CSS 隐藏 ui-loader 元素？您介意通过 info@at@panabee.com 给我们发送电子邮件吗？很想知道您是否对 HTML5 咨询感兴趣。
或者可能是ui-overlay-c类添加到body，尝试修改这个类。其中“c”是默认页面主题。

标签： jquery iphone html jquery-mobile mobile-safari

【解决方案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 完成时隐藏它。

所以：使用其他一些掩饰手段，例如自定义启动屏幕
例如，我正在做this 或this。这两个应用程序都加载了 requireJS 并使用了我编写的自定义启动脚本（在使用 iOS 启动图像拉出我的头发之后）。

这是它的工作原理：

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

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

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

【讨论】：

【解决方案2】：

我认为这里有更多信息..

加载页面和登录页面是否属于同一个项目？
你能让你在加载屏幕和登陆页面之间没有完全刷新吗？

其他建议：

如果加载页面和登陆页面属于同一个项目（域），请尝试使用 changePage (http://api.jquerymobile.com/jQuery.mobile.changePage/) 从加载中调用登陆页面。通过这种方式，加载图标应该会持续存在。
您可以指向一个新的登录页面，看看这个白屏是否不显示。这个着陆页可能有问题。

【讨论】：

谢谢你，“同一个独立项目”的一部分是什么意思？如果您从桌面浏览器查看 www.tekiki.com/dandy/dandy，您可以模拟移动设备上发生的情况。登陆和加载屏幕都属于同一个域。如果我们删除 JQM，白页就会消失。也就是引入JQM后才出现白页。
嗨 crashlot，我刚刚编辑了句子（删除“单独”）。如果他们都属于同一个项目，那么请忽略我写的内容。您是否尝试过以编程方式（通过 javascript）使用“changePage”？

【解决方案3】：

$(function(){
    setTimeout(hideSplash, 2000);
});

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

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

【讨论】：