Langsame Reaktion auf click-Ereignis auf dem iPad

Machte ich eine demo von einer Foto-Konzept, das schaltet zwischen zwei Bildern zu zeigen, einen Unterschied zwischen Ihnen.

Habe ich ein onMouseClick Ereignis, das funktioniert gut, außer auf dem iPad. Die Antwort ist sofort auf meinem desktop, aber Sie ist deutlich verzögert auf das Tablett, vielleicht 500ms?

Ist das normal? Gibt es einen anderen Weg ich kann damit umgehen?

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';
    }
}​

Körper:

 <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>
​

Auch auf jsfiddle: http://jsfiddle.net/ntmw/R4pey/5/

InformationsquelleAutor der Frage ntmw | 2012-09-14

  1. 15

    iOS zielgerichtet Verzögerungen klicken Sie auf Ereignisse, so dass gesten/wischen einwandfrei. Zum Beispiel, wenn Sie Tippen Sie auf ein element, das Sie könnte bedeuten, das scrollen der ganzen Seite, nicht Feuer das click-Ereignis auf ein element. Zum erzielen feiner abgestufte Kontrolle, verwenden Sie touch-Ereignisse.

    Finden Sie unter: https://developer.mozilla.org/en-US/docs/DOM/Touch_events

    Beispiel mit touchstart: http://jsfiddle.net/R4pey/7/.

    Beachten Sie, dass die Aufnahme touch-Ereignisse hat Auswirkungen, z.B. können Sie überschreiben, ein Verhalten, das den Benutzer erwartet (wie z.B. streichen).

    Beachten Sie auch, dass Sie sollten in der Regel binden Sie Ihre Veranstaltungen unabhängig von markup (nicht inline), um eine sauberere Trennung von markup und Skript.

    Hier ist ein Beispiel mit jQuery-was bindet die Ereignisse getrennt von den markup-Code und die beiden Griffe click und touchstart Veranstaltungen. Getestet in Chrome 21, FF 15, IE9, und auf dem 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(); 
});

    InformationsquelleAutor der Antwort Tim Medora

  2. 2

    überprüfen Sie den folgenden link für das schneller und Tasten reagieren:
    https://developers.google.com/mobile/articles/fast_buttons?hl=de-DE&csw=1

    InformationsquelleAutor der Antwort amolp1709

  3. 2

    Implementieren touchend-Event-Handler

    Im Gegensatz zu klicken Sie auf und touchstarttouchend Ereignisse ausgelöst werden, sofort, ohne ein 300ms delay. Dies kann praktisch sein, wenn Sie die Entwicklung ein touch-nur WebGL oder canvas-basiertes Spiel, aber verlassen Sie sich nicht ausschließlich auf touchend in standard-web-Seiten.

    $('#id').on('touchstart',function(e) {                

    //code here...

});

    InformationsquelleAutor der Antwort mpalencia

  4. 0

    Habe ich erfahren, einige Probleme mit Bildern auf IOS-Geräten. Zum Beispiel verwende ich HTML5 Verläufe und Schatten (auch Bilder) auf meiner Seite und bemerkte eine riesige Resonanz Unterschied, wenn das entfernen der Bilder.

    Den beigefügten click-Ereignis ist in Ordnung, aber die Reaktion ist langsam, weil Safari scheint zu beschäftigt mit den Bildern (es Neuzeichnen ständig).

    Ich habe ein iPad3, um es zu testen. Ein Mann hat einen interessanten Artikel geschrieben über die image-Probleme auf IOS.

    Finden Sie unter:
    http://roman.tao.at/dev/mobile-safari-memory-usage-with-images/

    InformationsquelleAutor der Antwort Codebeat

Schreibe einen Kommentar