Search code examples
javaiosweb-applicationstouchdelay

How to write an instant response code on iOS WebApp?

I am writing some WebApp on iOS, to using for collect some data for my work. But i found some problem with it.

The program that i want to write is very simple, make picture disappear when touch it. So i come up with this very simple code.

<!DOCTYPE HTML>
<html lang="en-US" manifest="manifest.mf">
<head>
    <meta charset="UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />  
    <meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=0;">
    <link rel="apple-touch-icon-precomposed" href="icon.png"/> 
    <style type="text/css">

    *{
        -webkit-touch-callout: none;
    }

</style>
<script src="http://code.jquery.com/jquery.min.js"></script>

<script>
function show_coords(event)
{
var x=event.offsetX;
var y=event.offsetY;
//alert("X coords: " + x + ", Y coords: " + y);
$("#result p").text("coX= "+x+" coY= " +y);
}

 $(document).ready(function() {
        $('img').each(function() {
            $(this).click(function() {
                $(this).stop().animate({ opacity: 1.0 }, 1);
            },
           function() {
               $(this).stop().animate({ opacity: 0.0 }, 0);
           });
        });
    });
</script>
    <title>DataCollect</title>
</head>
<body>
<img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><br>
<img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><br>
<img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><br>
<img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><br>
<img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><br>

<div id='result'>
    <p></p>
</div>
</body>
</html>

This code works very fine on pc's browser. it response sundenly as i want. But when i run it on iphone's Safari. It seems a little bit delay. the picture is not disappear suddenly. Seems like lagging about a little second.

You guys can try on your ios's Safari here http://jjwestwind.tk/napp/

So, what should i do? Is there any other way to write this kind of application on WebApp? Or i have no choice but going back to native app? (which will cause a lot of trouble for me to provide it to others user)

please help me! Thank you so much :)

Solution

  • It might help to eliminate the click-delay as this answer recommends: remove click delay

    Or use this FastClick code javascript code.