javascript - sensibilidad - Respuesta lenta al evento click en iPad

sensibilidad pantalla iphone 6

Question

Hice una demostración de un concepto de fotografía que alterna entre dos imágenes para mostrar la diferencia entre ellas.

Tengo un evento onMouseClick que funciona bien, excepto en el iPad. La respuesta es instantánea en mi escritorio, pero se retrasa bastante en la tableta, tal vez 500ms?

¿Esto es normal? ¿Hay alguna otra forma en que pueda manejar esto?

Javascript:

var img1 = new Image();
img1.src = "http://watkinsfilm.com/wp-content/uploads/2012/09/19mm.jpg";
var img2 = new Image();
img2.src = "http://watkinsfilm.com/wp-content/uploads/2012/09/200mm.jpg";
function test() {
if (document.pic.src == ''http://watkinsfilm.com/wp-content/uploads/2012/09/19mm.jpg'') {
document.pic.src = ''http://watkinsfilm.com/wp-content/uploads/2012/09/200mm.jpg'';
}
else if (document.pic.src == ''http://watkinsfilm.com/wp-content/uploads/2012/09/200mm.jpg'') {
document.pic.src = ''http://watkinsfilm.com/wp-content/uploads/2012/09/19mm.jpg'';
}
}​

Cuerpo:

 <div>
<table id="table-1" >
<tr><td>
<img id="img" src="http://watkinsfilm.com/wp-content/uploads/2012/09/19mm.jpg" name="pic" onMouseDown="test()"/>
<img id="png1" src="http://www.thedigitaltrekker.com/wp-content/uploads/2012/03/logo-6smA.png"/>
Click on the image above to toggle between 19mm and 200mm <br>
</td></tr>
</table>
</div>
​

También en jsfiddle: http://jsfiddle.net/ntmw/R4pey/5/

Answer 1

He experimentado algunos problemas con imágenes en dispositivos IOS. Por ejemplo, uso degradados y sombras HTML5 (también imágenes) en mi sitio y noté una gran diferencia de respuesta al eliminar las imágenes.

El evento de clic adjunto funciona bien, pero la respuesta es lenta porque Safari parece estar ocupado con las imágenes (lo vuelve a dibujar constantemente).

Usé un iPad3 para probarlo. Un chico ha escrito un interesante artículo sobre los problemas de imagen en IOS.

Ver: http://roman.tao.at/dev/mobile-safari-memory-usage-with-images/

Answer 2

iOS a propósito demora los eventos de clic para que los gestos / deslizamiento funcionen correctamente. Por ejemplo, cuando tocas un elemento, puedes querer desplazarte por toda la página, no disparar el evento click en un elemento. Para lograr un control más detallado, use eventos táctiles.

Ver: https://developer.mozilla.org/en-US/docs/DOM/Touch_events

Ejemplo usando touchstart : http://jsfiddle.net/R4pey/7/ .

Tenga en cuenta que la captura de eventos táctiles tiene consecuencias, por ejemplo, puede anular un comportamiento que el usuario espera (como deslizar).

También tenga en cuenta que normalmente debe vincular sus eventos independientemente de su marcado (no en línea) para lograr una separación más clara de marcado y script.

Aquí hay un ejemplo que usa jQuery que vincula los eventos por separado del marcado y maneja los eventos de click y de touchstart . Probado en Chrome 21, FF 15, IE9 y en el iPad 3.

var url1 = "http://watkinsfilm.com/wp-content/uploads/2012/09/19mm.jpg";
var url2 = "http://watkinsfilm.com/wp-content/uploads/2012/09/200mm.jpg";
// preload from original code
var img1 = new Image();
img1.src = url1;
var img2 = new Image();
img2.src = url2;
// bind the click and touchstart events
$("#img").on("click touchstart", function(e){
    if (this.src == url1) {
        this.src = url2;
    }
    else if (this.src == url2) {
        this.src = url1;
    } 
// When touch event fires, this is needed to prevent the click
// event from firing as well as @RyanWheale noted in the comments.
    e.preventDefault();
});

Answer 3

revise el siguiente enlace para obtener los botones más rápidos y receptivos: https://developers.google.com/mobile/articles/fast_buttons?hl=de-DE&csw=1

Answer 4

Implementar manejadores de eventos touchend

A diferencia del clic y el inicio táctil , los eventos de touchend se activan instantáneamente sin un retraso de 300 ms . Esto puede ser práctico si está desarrollando un juego WebGL o un juego basado en lienzo solo táctil, sin embargo, no puede confiar únicamente en touchend en páginas web estándar.

$(''#id'').on(''touchstart'',function(e) {
//code here...
});