jQuery Mobile 面板在页面完全加载之前在初始加载时显示，速度较慢的设备

Posted 2023-05-09

【中文标题】jQuery Mobile 面板在页面完全加载之前在初始加载时显示，速度较慢的设备

【英文标题】：jQuery Mobile panels display on initial load with slower devices before page fully loads

【发布时间】：2019-05-25 06:17:28

【问题描述】：

我注意到我创建的一个 webview 应用程序在使用较慢的设备时，我在我的网站中创建的 jQuery 移动面板将在 webview 首次加载时短暂显示在正文底部，但在完全加载后消失。

我想知道 jQuery mobile 是否有办法防止这种情况发生。

如果在 jQuery mobile 中无法做到这一点，我的想法是最初为面板分配 display: none

HTML

<div data-role="panel" id="this_panel" data-display="overlay" style="display: none">

然后使用 jQuery 在单击用于显示面板的按钮时应用display: block

jQuery

$(document).on('click', '#panel_button', function() 
    $('#this_panel').show();
)

更新

所以我认为我找到了一个很好的解决方案，可以在页面加载时尽可能保持干净。由于面板工作在<li> 列表中。当页面最初加载并且它是一个较慢的设备时，您会在 CSS 应用到它然后将其隐藏之前短暂地在页面底部看到面板 html。

我所做的是像<div data-role="panel" id="tickets_cog_panel" data-display="overlay"></div> 这样放置面板容器，但随后使用 jQuery 我通过 $('#tickets_cog_panel').html('html here') 加载 html。由于 jQuery 必须等到内容完全加载后才能加载，所以加载得更干净。

【参考方案1】：

问：我想知道 jQuery mobile 是否有办法防止这种情况发生？

答：不幸的是，jQuery Mobile 因其错误而臭名昭著，您可能永远不会看到它们被修复（我们谈论的是死框架）。

通常的答案很简单，实现一个启动画面。

在mobileinit 事件中隐藏它。

$( document ).on( "mobileinit", function() 


);

如果您仍然面临 mobileinit 事件，您应该改用 pageshow 事件。

改用 Cordova 启动画面。

另一种方法是像您之前所说的那样隐藏它，然后在 mobileinit 或 pageinit 事件中再次启用它。