Question

我注意到，使用我创建的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必须等待加载直到内容完全加载，因此加载起来更加简洁。

Answer 1

问：：我想知道jQuery mobile是否可以防止这种情况发生？

A：不幸的是，jQuery Mobile因其错误而臭名昭著，您可能永远都看不到它们已修复（我们正在谈论无效的框架）。

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

在mobileinit事件中隐藏它。

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


});

如果即使mobileinit事件仍然存在，则应改用pageshow事件。

改为使用Cordova初始屏幕。

另一种方法是如前所述隐藏它，并在mobileinit或pageinit事件上再次启用它。

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

1 个答案: