Панели jQuery Mobile отображаются при начальной загрузке с более медленными устройствами до полной загрузки страницы

Question

Я заметил, что с помощью приложения для веб-просмотра, которое я создал, на более медленных устройствах мобильные панели jQuery, которые я создал на своем сайте, будут ненадолго отображаться внизу тела при первой загрузке веб-просмотра, но затем исчезают при полной загрузке.

Мне было интересно, есть ли способ с помощью 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> списков.Когда страница изначально загружается и работает медленнее, вы видите панель html вначале в нижней части страницы, а затем ненадолго CSS применяется к ней, а затем скрывает ее.

То, что я сделал, это поместил контейнер панели как <div data-role="panel" id="tickets_cog_panel" data-display="overlay"></div>, но затем с помощью jQuery я загружаю html через $('#tickets_cog_panel').html('html here').Поскольку jQuery должен ждать загрузки до полной загрузки контента, он загружается намного чище.

Answer 1

Q: Мне было интересно, есть ли способ с помощью jQuery mobile предотвратить это?

A: К сожалению, нет, jQuery Mobile печально известен своими ошибкамии вы, вероятно, никогда не увидите их исправленными (мы говорим о мертвых фреймворках).

Обычный ответ прост - реализовать заставку.

Скрыть это на mobileinit событие.

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


});

Если вы по-прежнему сталкиваетесь даже с событием mobileinit, вам следует вместо этого использовать событие pageshow .

Вместо этого использовать заставку Cordova.

Другой подход заключается в том, чтобы скрыть его, как вы ранее заявили, и снова включить его в событии mobileinit или pageinit.