คงมีหลายคนไม่น้อยที่เคยใช้การสั่งให้ฟังก์ชั่นทำงานตอน document โหลดเสร็จ ไม่ว่าจะเป็นการใช้ onload event ใน <body> หรือจะเป็นการกำหนดค่าใน window.onload event ของ javascript
เมื่อมองถึง jQuery แล้ว jQuery มี function ที่ทดแทน (ที่ดีกว่า ผมเชื่ออย่างนั้น) คือ ready() ซึ่งทำงานใกล้เคียงกัน
การใช้ $.ready() หรือ $() หรือ $(document).ready() จะเกิดขึ้นเมื่อ document ถูกโหลดและ parse เป็น DOM สำเร็จ เรียกง่าย ๆ ว่า ทำเมื่อ document ถูกโหลดแล้วนั่นเอง เราสามารถใช้ $() แทนการเขียนรูปแบบอื่น ๆ ได้ เพื่อให้สั้นและกระชับ และฟังก์ชั่นนี้เองที่เราจะเอามาแทน window.onload
ข้อแตกต่างระหว่าง $() และ window.onload อย่างหนึ่งที่เห็นได้ชัดคือ รูปแบบการทำงานของฟังก์ชั่นที่เอามาผูกด้วย
ผมหมายถึงถ้ามีการเรียก window.onload = <ชื่อฟังก์ชั่น> หลายครั้ง จะถือว่าการ bind ครั้งสุดท้าย เป็นฟังก์ชั่นที่จะถูกทำงานเมื่อ document ถูกโหลดแล้ว ในขณะที่ $(<ชื่อฟังก์ชั่น>) ถ้าถูกเรียกหลายครั้ง จะเป็นการสั่งให้ทำงานตามลำดับการเรียก หลังจากที่ document ถูกโหลดเสร็จ
และเพื่อให้เห็นภาพได้ชัดเจนขึ้น ลองไปดูได้ที่ LIVE DEMO ได้เลยครับ
ข้อห้ามอย่างหนึ่งคือในการใช้ $() คือ ห้ามมีการกำหนด window.onload หรือ onload ใน <body> อยู่ด้วยกันกับ $() ไม่งั้นแล้ว ฟังก์ชั่นที่ผูกกับ $() จะไม่ทำงานครับ
สิ่งที่สำคัญอีกเรื่อง ซึ่งผมเคยพูดไปในบทความก่อน ๆ แล้ว คือ การเรียก element ที่ยังไม่ถูกโหลด หรือยังไม่มีอยู่จริงใน DOM ใน javascript การเรียกใช้ element นั้น ๆ ใน window.onload หรือ $() จะสามารถแก้ปัญหานี้ได้ครับ
ขอบคุณ คับ สำหรับ เทคนิด ดีๆ
ขอบคุณมากครับ เพิ่งเข้ามากครั้งแรก พอดีกำลังศึกษา jQuery อยู่คับ
ขอเสริมนิดหนึ่ง การใช้ $.ready จะมีปัญหานิดหนึ่งถ้าใน page มีการเรียก load script ที่ช้าืำทำให้การ event onload ถูก delay ออกไปด้วย ลองเอา plugin ชื่อ elementReady มาช่วยด้วยจะแก้ปัญหานี้ได้ จริง ๆ แล้วอันนี้ต้องยกให้ YUI เพราะว่ามี suuport หลายอย่างกว่า
ขอบคุณครับ
ขอบคุณสำหรับความรู้ที่แชร์กันครับ จะแวะเวียนมาเก็บเกี่ยวบ่อยๆ ครับ
ปกติถ้าผมใช้ $.ready ผมก็ไม่ใช้ event onload อยู่แล้วนี้ครับ