微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

使用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-mobile-rendering > * { visibility: hidden; }

当JQM开始初始化时,该类被添加

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

并在第一次页面显示删除.

整个过程是必要的,因为否则您将看到预增强的标记,直到JQM完成渲染.所以如果你想“删除”它,你可以声明:

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

但是你会看到你的所有源代码都被jQuery Mobile搞定了.

我知道的解决方法

提供预增强的标记而不是JQM
这是JQM 1.4之前的一种考验(在这种情况下,您将拥有更少的生成元素和告诉JQM的选项,哪些小部件是预先增强的),但尽管需要一些小部件重写,但仍然可以完成.

同样从我在你的代码中看到的,你的问题应该是,iOS启动图像在它想要时消失(=在JQM初始化之前),而你可以控制它并在JQM完成时隐藏它.

所以:使用其他一些掩盖方法,如自定义启动屏幕
例如,我正在做thisthis.两个应用程序都加载了requireJS并使用我编写的自定义启动脚本(在用iOS启动图像拉出我的头发之后).

下面是它的工作原理:

>在身体上添加一类飞溅物. CSS:在完整的白色背景之前(…加载)
>通过CSS或Javascript添加可选的背景图像(没有jQuery或JQM,因为它必须在解析之前运行)
>从正文中删除页面显示上的飞溅.由于您始终保留在首先加载的页面上(除非您使用rel =“external”,因此正文仍然存在,因此您可以安全地将该类添加到您的所有页面,并且它只会在用户加载的第一页上运行掩盖.

这隐藏了JQM完成时设置的任何启动屏幕,因此您不会有白屏.此外,它可以跨浏览器工作(与iOS启动图像相比),并且可以轻松地与不同的图像大小一起使用(尝试使用不同设备和视频/横向的第二个应用程序).

如果您需要完整的代码示例,请与我们联系.

原文地址:https://www.jb51.cc/jquery/180998.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐