มารู้จักกับฟังก์ชัน .ready() ของ jQuery กันซะหน่อย

ฟังก์ชัน .ready( handler ) ใช้เพื่อระบุฟังก์ชันที่ต้องการให้ execute เมื่อ DOM โหลดเรียบร้อยแล้ว (“Specify a function to execute when the DOM is fully loaded.”) javascript จะมี load event ที่ทำงานหลังจากที่หน้าเว็บโหลดเสร็จหมดแล้ว หรือพูดอีกอย่างก็คือ load จะไม่ทำงานจนกว่ารูปภาพ, script, stylesheet จะโหลดเสร็จ ซึ่งโดยทั่วไปแล้ว script ต่างๆ ไม่จำเป็นต้องรอให้รูปภาพหรือ stylesheet โหลดเสร็จก่อนค่อยทำงานก็ได้ ถ้าหาก script นั้นๆ ไม่ขึ้นอยู่กับค่าของ css 

กรณีที่โค้ดขึ้นอยู่กับทรัพยากร (assets) เช่น ค่าความกว้างความสูง (dimension) ของรูปภาพ เราควรจะวางโค้ดไว้ที่ load event แทน

การใช้งานฟังก์ชัน .ready() สามารถเรียกใช้ได้ 3 แบบคือ

$(document).ready(handler)
$().ready(handler) (ไม่แนะนำให้ใช้)
$(handler)