วิธีทำให้ปุ่มและ UI บนแอพ PhoneGap ตอบสนองเร็วเหมือนแอพ Native

ปุ่มกดบน PhoneGap อาจจะเหมือนเป็นคำสาปที่ติดมาพร้อมกับความสามารถของ PhoneGap ไม่ว่าเราจะใช้แท็ก , ใช้ JavaScript, หรือจะใช้ framework อย่าง JQuery มาใช้กับ event ก็ดูเหมือนจะไม่สามารถแก้ไขได้ มันเกิดจากอะไร และเราจะแก้ไขได้อย่างไรบ้าง

Web browser นี่แหละ ตัวต้นเหตุ

ความจริงมีเพียงหนึ่งเดียว!! ต้นเหตุของการตอบสนองที่ไม่ทันใจใครหลายๆ คน ไม่ใช่ข้อผิดพลาดที่ใครที่ใดที่หนึ่ง แต่เป็นเพราะสิ่งที่ระบบปฏิบัติการบนอุปกรณ์ต่างๆ ทำต่อลิ้งค์บนเว็บทั่วไปนั่นเอง 300 ms. ดังนั้นพอเราทราบว่าตัวการของปัญหาอยู่ที่ไหน ก็สามารถหาวิธีการมาแก้ไขได้ถูกต้อง

วิธีแก้ไขให้ปุ่มกด หรือ link ตอบสนองกับการกดเร็วขึ้นบนแอพที่สร้างด้วย PhoneGap

เท่าที่เจอมา ทางแก้ของเรามีหลายวิธีครับ โดยเราสามารถแบ่งได้ตามเครื่องมือและวิธีการที่เราสร้างแอพนั่นเอง ไม่ว่าจะเป็นแบบธรรมดา (สายบริสุทธิ์ ใช้แค่ JavaScript), ใช้ plugin เพิ่มเติม, และ การใช้ framework อย่าง AngularJSโดยผมแยกแต่ละส่วนไว้ด้านล่างครับ

Fastclick

สามารถ download Fastclick.js ได้ที่ Github

วิธีนำไปใช้ใน HTML

<head>
..
<script type='application/javascript' src='fastclick.js'></script>
..
</head>

วิธีเริ่มการทำงานของ Fastclick.js ใน PhoneGap

function onBodyLoad()
{       
    document.addEventListener("deviceready", onDeviceReady, false);
}

function onDeviceReady()
{
  alert('test');
  FastClick.attach(document.body);
}

ติดตามเนื้อหาที่เกี่ยวข้อง

สนใจเรื่อง Web Design, Adobe for Web, และ PhoneGap ฝาก Email รับบทความใหม่ๆ จากผมได้ที่นี่ครับ

ดูเนื้อหารวมเรื่อง PhoneGap ได้ที่ nextflow.in.th/phonegap

 

1 Comment. Leave new

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Menu