Eliminar retraso al dar click a una acción en dispositivos móviles

Estamos haciendo algunas cosas para móviles, específicamente con PhoneGap. En general, se van creando los contenedores de datos y luego a través de ajax se descarga y muestra el contenido para tal o cual contenedor. La forma más común para llamar contenido es a través de un evento onclick de javascript, por ejemplo si tuviese un listado  y quiero que al dar click en alguna opcion me lleve a su contenido sería algo similar a esto:

<ul>
<li><a href="#" onclick="muestra(1)">titulo1</a></li>
<li><a href="#" onclick="muestra(2)">titulo2</a></li>
</ul>

y ya después tenemos definida la función muestra() que entonces toma el argumento y lo despliega —donde deba—.

Desgraciadamente y por algo inherente a la función de los dispositivos táctiles, tal evento onclick tiene una demora casi insignificante, resulta que espera si el usuario va a hacer un doble "tap" (que no click), o un "swipe" (deslizamiento con el dedo), etcétera. Esto trae como consecuencia que una aplicación web se vea lenta para hacer determinadas acciones, mas allá de si se tarda porque procesa muchos datos o va y trae cosas de algún servidor, en general deja un amargo sabor de boca.

La solución que encontré fue utilizar el evento tap en lugar de click, así que en nuestro ejemplo anterior lo dejé como sigue:

<ul>
<li class="opt" id="t1">titulo1</li>
<li class="opt" id="t2"></li>
</ul>

y en la parte de javascript, en lugar de la función a llamar por onclick, un evento:

$('.opt').live('tap',function(e){
   e.preventDefault();
   //lo que haya que hacer... por ejemplo, obtener el item 2:
   // var item = $(this).attr(id).substring(1);
   // así, item tendría el valor del id. etc.
   return false;
});

Con eso y algunos cambios en el CSS en general que están mejor explicados en esta dirección: http://maxogden.com/fast-webview-applications.html se deja de apreciar ese pequeño retraso tan molesto. Es sólo una idea, hay muchas formas de hacerlo, pero esto es lo que a mi me funcionó. Una cosa mas, esto funciona cargando previamente la biblioteca zepto.js.

+ fotos

Almacenado en PhoneGap, Desarrollo Móvil, Zepto.js

por Jorge Martínez Mauricio :)



¿Algo que comentar?


Suscríbete por correo electrónico, recibirás los nuevos escritos antes que nadie y es gratis 😊

¿Ya conoces los foros de tar?

Relacionadas

    Fotografías de

    tar.mx es un blog sobre fotografía, tecnología y otras chunches