在页面更改期间，按钮变得丑陋

Question

我已经用jquery mobile整理了一个简单的webapp。当用户访问主页面时，他们将面对一个按钮列表，他们可以点击这些按钮来确定去哪里。

这些按钮是从对php脚本的ajax调用生成的，该脚本调用数据库来确定可用的选项。

有多个页面，每个页面在pageshow时都会进行自己的ajax调用。每个按钮都是data-role="button"的链接，因此它们看起来不错。

然而，我遇到的一个问题是，在页面更改之间，会有轻微的延迟导致按钮在页面更改之前变得难看。

这在慢速（或繁忙）计算机上更为明显。如果设置页面需要很长时间（可能是从DB返回了大量数据），也会发生延迟并且按钮变得很丑。

这可能是什么原因？

Answer 1

有（至少）三种处理方法：

• 在显示页面之前添加内容：将动态内容添加到jquery mobile增强页面之前触发的事件pagecreate。显然，如果您的呼叫是异步的，您可能没有机会在页面增强之前检索和插入动态内容。
• 在元素显示之前隐藏它们：我就是这样做的（在列表中使用jqm列表，不必使用按钮）。我用一个归​​结为display:none;的css类创建我的元素，并在手动调用增强后删除这个类
• 一个接一个地增强按钮：为了不必等待整个元素在开始看起来很好之前插入，你可以在插入之后在每个元素上调用.button()（如果你一个接一个地插入DOM中）。对于每个元素，你可能仍然会从丑陋到好看之间略微“眨眼”，但如果有的话，这几乎不会引起注意。