Geek Answers Handbook

Android WebView: a very long button response

I have a small web application that I made to work with Android WebView functionality.

I have a div that I use as buttons (with onclick attributes). After testing the application (in the device’s browser), I immediately noticed a huge amount of lag after clicking the button. A delay occurs between when I click the button and when the browser shows an orange backlight around it.

I did some testing and got some info:

  • JavaScript is not a problem. I disconnected all my scripts and extinguished all the onclick attributes. Performance has not changed.
  • CSS3 is not a problem. I got rid of all the fancy gradients and the performance hasn't changed.
  • The number of elements is not a problem. I tried this with a few elements per page and the performance has not changed.
  • Doctype and metafiles are not a problem. I made sure that I use what Android recommends .

I am very glad why so many are behind. I eliminated everything that could cause him, but nothing helped.

Did I miss something?

How to remove the delay after clicking the button?

+8
javascript android html web-applications
source share
4 answers

Basically, event events in mobile browsers are delayed by 300 ms. Do you know about a quick button template? Basically you can use the touchstart event (which fires without delay).

Here is the full explanation: http://code.google.com/mobile/articles/fast_buttons.html

+16
source share

In this way, the WebView fires every tap event to see if it is a double tap or touch move event. There is an alternative to binding to touchstart events. If you use the viewport meta directive to indicate that your WebView should not zoom in or out, touch events will immediately reach your code (starting with Gingerbread).

Viewport directive information can be found here: http://developer.android.com/guide/webapps/targeting.html

+3
source share

try pasting in html code

<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, user-scalable=no">

and quick click on click click is no longer a problem (for me 4.2.2 and WebChromeClient)

+3
source share

Since the Google code is very complicated, I implemented my own using Mootools 1.3 +:

 Element.Events.touch = { base: 'touchend', condition: function(e) { return ((new Date().getTime() - this.startT < 200) && this.valid) ? true : false; }, onAdd: function(fn) { this.addEvent('touchstart', function(e) { this.valid = true; this.startT = new Date().getTime(); this.startX = e.touches[0].clientX; this.startY = e.touches[0].clientY; }); this.addEvent('touchmove', function(e) { if ((Math.abs(e.touches[0].clientX - this.startX) > 10) || (Math.abs(e.touches[0].clientY - this.startY) > 10)) this.valid = false; }); } };

Just put this code on your page and now use touch , not click :

 $('id').addEvent('touch', function() { // your code });

It works by adding the touchhend and touchstart events if they happen in less than 200 ms, and a touch does not affect its actual touch too much, and not vice versa.

It worked great on 2.2 and 4.0

0
source share

More articles:


All Articles