There are many articles on removing click delay in mobile apps. Fastclick focuses on issue: "mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click event."
But my query is bit different my android mobile application developed in eclipse is taking too long to enable click event (i.e 1st time the app loads click events are not fired for really long time and once the click event occurs for the 1st time, subsequent click events are much faster). I have only tested it on emulator have not tested yet on real device.
How can I remove that delay?
Here is my html page:
<head>
<title>First App</title>
<style>
.table {
border: 2px solid #a1a1a1;
background: #dddddd;
width: 90px;
height: 90px;
border-radius: 25px;
text-align: center;
line-height: 90px;
position:absolute;
}
</style>
<script src="cordova.js"></script>
<link rel="stylesheet" href="jquery.mobile-1.4.3.min.css">
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script src="jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript">
var areaIdvalue=1;
var layoutIdvalue=1;
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady()
{
loadLayot();
loadAreaButton();
loadTableData();
}
function loadTableData()
{
$('.table1').html('');
var param = "{'areaId':" + areaIdvalue + ",'layoutId':" + layoutIdvalue + "}";
$.ajax({
type: "POST",
url: "http://192.168.0.70:81/MobileService.asmx/GetTables",
data: param,
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function (msg) {
var Tabels = msg.d;
$.each(Tabels, function(index, table) {
var tabel_data='<div class="table"';
tabel_data +=' style="top:'+ table.PointY +'px;';
tabel_data +='left:'+table.PointX+'px;"';
tabel_data +=" ' >"+table.TableName +"</div>";
$('.table1').append(tabel_data);
});
$(".table").on("tap",function(){
window.location = "AddItems.html";
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert('error');
alert(errorThrown);
}
});
}
function loadLayot(){
var param = "{'areaId':" + areaIdvalue + "}";
$.ajax({
type:'POST',
url :"http://192.168.0.70:81/MobileService.asmx/FetchLayout",
dataType:"json",
data: param,
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success : function (msg) {
var Tabels = msg.d;
$.each(Tabels, function(index, table) {
var div_data="<option value="+table.LayoutId+">"+table.LayoutName+"</option>";
//alert(div_data);
$(div_data).appendTo('#Layout');
$('#Layout').selectmenu('refresh');
});
$('#pageOne').on("change", '#Layout', function() {
layoutIdvalue=$('#Layout').val();
loadTableData();
});
},
error : function (XMLHttpRequest, textStatus, errorThrown) {
alert('error');
alert(errorThrown);
}
});
}
function loadAreaButton(){
$.ajax({
type:'POST',
url :"http://192.168.0.70:81/MobileService.asmx/FetchArea",
dataType:"json",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success : function (msg) {
var Tabels = msg.d;
$.each(Tabels, function(index, table) {
var div_data='<button class="ui-btn ui-btn-inline" value='+table.AreaId+'>'+table.AreaName+'</button>';
$(div_data).appendTo('#areadiv');
$(document).on('click', 'button', function() {
areaIdvalue=$(this).attr('value');
loadTableData();
return false;
});
});
},
error : function (XMLHttpRequest, textStatus, errorThrown) {
alert('error');
alert(errorThrown);
}
});
}
function callAnothePage()
{
//window.location = "AddItems.html";
$.mobile.changePage( "#pagetwo", { transition: "slidefade"} );
}
</script>
</head>
<body>
<div data-role="page" id="pageOne">
<div data-role="header" data-position="fixed">
<h1>Swift Retail</h1>
</div>
<div data-role="main" class="ui-content">
<div id="areadiv"></div>
<fieldset class="ui-field-contain">
<label for="Layout">Select Layout</label>
<select id="Layout" >
</select>
</fieldset>
<div class="table1" style="position: absolute; display: block; width:100%; height:100%"; ></div>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>