Question

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

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

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

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

商家不想改变设计，我尝试了各种各样的技巧来防止这种闪烁，现在我已经没有想法，我已经尝试延迟显示页面，直到页面完全加载，但不起作用

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

由于艾拉

Answer 1

你所指的是被称为“闪烁”，因为已经有详细记录，并在这里问过几次：

我自己在Android手机（v4.0.4）上遇到了同样的问题，在PhoneGap上构建了一个应用程序：进入/离开我的主页面（包含一个长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";
});

Answer 2

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

有一个包装div与显示无对齐的东西。在加载时，加载div将显示loading.png的背景图像。加载内容后，将包装器div设置为显示并删除加载div。

以不同的方式加载数据会更好，但据我所知并非总是可行。

Answer 3

对于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。

我刚刚发现，在overflow使用hidden函数期间将scrollBars设置为body时，使用jsFiddle与jQuery 1.8.2和jQuery Mobile 1.2.0无法正常工作那个jsFiddle。

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

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

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