Monacaでアプリ開発をするときに気をつけなければいけない点として、使いたい機能が使える状態になっているかが挙げられます。

Cordovaプラグインを組み込んだ場合は、JavaScriptからネイティブ機能へアクセスが可能になっていないとCordovaプラグインの機能を利用することはできません。また、Onsen UIを利用する場合も、Onsen UIのコンポーネントの読み込みが完了していないと利用することができません。

そこで今回は、Monacaで開発したアプリが起動した時のJavaScriptのイベント発生順序を見ていきたいと思います。

イベント発生順序は、以下になります。

順番 イベント名 発生のタイミング
1 DOMContentLoaded HTMLのすべてのDOM要素が読み込まれた時に発生します。
2 load HTMLのレンダリングに必要なリソースがすべて読み込まれた時に発生します。
3 deviceready JavaScriptからネイティブ機能へアクセスが可能になった時に発生します。
4 ons.ready Onsen UIコンポーネントの読み込みが完了し、devicereadyイベントの後に発生します。

Monacaで開発するアプリでCordovaプラグインやOnsen UIを使用する場合は、このように発生するイベントの順番を意識する必要があります。

イベントの発生順序は、次のHTML内の<script>タグで確認できます。
注意点として、MonacaクラウドIDEのプレビューでは、実機での発生順序とは異なった動きになります。
テストをする場合は、実機をお使いください。

Android端末で検証してみました。
このJavaScriptが実行されると、

順番 メッセージ
1 DOMContentLoaded
2 load
3 deviceready
4 Onsen UI ready

の順番で実行されることを確認することができます。

devicereadyイベントは、loadイベントの後に発生します。
HTMLのレンダリングに必要なリソースが多い場合は、その分devicereadyイベントの発生が遅れることになります。CordovaプラグインやOnsen UIを利用する際は、この点も注意する必要があります。

Monacaでのアプリ開発で、

「Cordovaプラグインが動作していないのでは?」
「Onsen UIが動作していないのでは?」

と感じた時は、一度CordovaプラグインやOnsen UIが利用可能な状態になっているかどうか確認してみてください。