jquery - jquery手机iphone页面闪烁

Question

我正在开发一个移动页面应用程序，其中一个页面很长，（这个页面太长了，如果我必须从头到尾查看它，我必须在 Iphone 上滚动 6 次。）

此页面加载后，它会跳转并稳定下来。或加载后闪烁，对用户来说非常烦人。

此页面上的数据正在运行时呈现。我有空的 div 元素，我在运行时使用 jquery pageshow 事件填充字段名称和值。

我发现如果我通过删除一些正在渲染的数据来缩短长度，这个闪烁就会消失，但是我不能这样做

业务不想更改设计，我尝试了各种技巧来防止这种闪烁，现在我已经没有想法了，我尝试延迟显示页面，直到页面完全加载，不起作用尽管

你能帮忙吗，有什么办法可以防止这个页面闪烁。

谢谢艾拉

score 4 · Accepted Answer

您所指的是所谓的“闪烁”，因为已经有据可查，并在这里问了几次：

我自己在我的 Android 手机（v4.0.4）上使用基于 PhoneGap 构建的应用程序时遇到了同样的问题：与我的主页（包含一个 long data-role="listview"）之间的转换会导致屏幕在执行前闪烁。我的诀窍是添加user-scalable=no到视口元标记中：

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1" />

尽管其他人通过覆盖 jQuery mobiles css 和/或完全禁用页面转换而取得了成功：

CSS

.ui-page {
    -webkit-backface-visibility: hidden;
}

JS

$(document).bind("mobileinit", function () {
    $.mobile.defaultPageTransition = "none";
});

score 0 · Accepted Answer

对于 jQuery Mobile，使您的footer 持久化并防止该部分动画化。

<div data-role="footer" data-id="foot" data-position="fixed">
  <h4>Page 1 Footer</h4>
</div><!-- /footer -->

编辑：最新动态

上面的 jsFiddle jQuery Mobile Demo 已经修改为使用 jQuery 1.7.2 和 jQuery Mobile 1.2.0。

我刚刚发现在使用 jsFiddle中的函数期间将 jsFiddle 与 jQuery 1.8.2 和 jQuery Mobile 1.2.0overflow一起使用时无法按预期工作。hiddenscrollBars

该功能是在jQuery动画期间隐藏浏览器滚动条，防止元素在页面更改的动画期间短暂跳转。

浏览器的滚动条实际上是隐藏的，但是该body部分中的元素继续“跳跃”，就好像滚动条仍然存在一样。

当 jsFiddle jQuery 设置为 1.7.2 时，不会发生这种情况。

score 0 · Accepted Answer

您可以实现一个小加载图标，直到所有数据都加载完毕。这将为用户提供无缝体验，但仍符合业务需求。

类似于有一个不显示的包装器 div。加载时，加载 div 将显示 loading.png 的背景图像。加载内容后，将包装 div 设置为显示和删除加载 div。

虽然以不同的方式加载数据会更好，但我知道这并不总是可能的。

3 回答 3