this is my way to hidden the #edit: There is a loading image in body, when the device is ready, it hides $edit and show loading image. when finish actions in getDetail, hidden #load and show #edit.However, now the problem is, when opening the page, both load and edit are showed, and it works normally after getDetail function.How should I modify the code? \[code\]<script type="text/javascript"> document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { $('#edit').hide(); getDetail(); }</script>\[/code\]js \[code\]function getDetail() { $('#load').hide(); $('#edit').show(); }\[/code\]html part\[code\] <div id='load'> <img src="http://stackoverflow.com/questions/15486285/loading.gif" style="margin-left:auto; margin-right:auto; "> </div><!-- /load --> <div id='edit'></div>\[/code\]*Extra Question * Do I need to \[code\]return false;\[/code\] in last line of getDetail()? Because all my javascripts are put in a js file. getDetail() is the first function. after running this function, i found that other functions are not work, even a simple on click function to alert something, those functions can only work if put the script in inline style in body.ps. fixed some copy and paste error