Como muitas pessoas sugeriram que usar um adiado é uma opção aceitável, desde que você não se importe com a ordem deviceready
e mobileinit
o que aconteceu. Mas no meu caso, eu precisava de alguns pageshow
eventos quando o aplicativo foi carregado pela primeira vez mobileinit
e, por extensão, esses eventos pageshow
/ pagebeforeshow
/ etc foram todos disparando antes de deviceready
terminados, então não pude ligar a eles corretamente usando um adiado neles. Essa condição de corrida não era boa.
O que eu precisava fazer era garantir que 'mobileinit' não ocorresse até que ' deviceready
' já fosse disparado. Porque mobileinit
dispara imediatamente quando você carrega o JQM, escolhi usar jQuery.getScript
para carregá-lo DEPOIS de deviceready
já ter terminado.
<script src="cordova-2.2.0.js"></script>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/async.min.js"></script>
<script src="js/app.js"></script>
<script>
document.addEventListener(
'deviceready',
function () {
$('body').css('visibility', 'hidden');
$(document).one("mobileinit", function () {
app.init();
$('body').css('visibility', '');
});
$.getScript('js/jquery.mobile-1.2.0.min.js');
},
false
);
</script>
O motivo pelo qual estou escondendo o corpo é que um efeito colateral desse método é meio segundo de visibilidade do documento HTML original antes que jquery.mobile carregue. Neste caso, escondê-lo por meio segundo extra de espaço vazio é preferível a ver o documento sem estilo.