jquery手机iphone页面闪烁

Posted 2023-05-09

【中文标题】jquery手机iphone页面闪烁

【英文标题】：Jquery mobile iphone page flicker

【发布时间】：2012-12-04 02:46:15

【问题描述】：

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

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

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

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

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

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

谢谢 爱尔兰共和军

【问题讨论】：

您使用的是Jquery 框架还是Jquery Mobile 框架？

@user1908682，对我的 jsFiddle 回答有什么想法吗？

【参考方案1】：

您所指的内容被称为“闪烁”，这已被充分记录并在这里问了几次：

jQuery Mobile blinking at page transitions on iPad

Transitions blink on jQueryMobile pages navigation

https://github.com/jquery/jquery-mobile/issues/4024

我自己在我的 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";
);

【讨论】：

你知道普通的 jQuery 库是否也会出现问题吗？我在使用滑块时遇到了非常相似的问题。

@Alvaro 据我所知，抱歉。

【参考方案2】：

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

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

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

【参考方案3】：

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

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

jsFiddle DEMO

---

编辑：最新动态

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

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

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

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

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