$(document).ready กับ $(window).load จะใช้อะไรดี?

ใน jQuery มีวิธีสั่งให้สคริปท์ทำงานเมื่อหน้าเว็บโหลดเสร็จอยู่สองวิธี คือ

$(document).ready();

และ

$(window).load();

ซึ่งสองวิธีนี้มันมีจุดต่างกันเล็กน้อยครับ

$(document).ready();

สำหรับ $(document).ready(); นั้น จะเป็นการสั่งให้โค๊ดทำงานเมื่อเบราเซอร์โหลด HTML Document ทั้งเว็บเสร็จเรียบร้อย และ DOM อยู่ในสถานะพร้อมใช้งาน จึงจะสั่งให้ JavaScript ทำงานครับ (คือมันไม่รอให้อะไรอย่างอื่น เช่นไฟล์ภาพบนหน้าเว็บโหลดเสร็จ ก็จะสั่งให้สคริปท์ทำงานเลย)

วิธีนี้จะมีปัญหากับเบราเซอร์บางตัว ไม่สิ ตัวเดียวเลย ก็คือ Google Chrome ครับ อย่างล่าสุดที่ผมเจอนี่คือสคริปท์จะทำงานก่อนที่ CSS จะประมวลผลหมด

$(window).load();

เมื่อวิธีแรกมีปัญหา เราก็เปลี่ยนมาใช้วิธีนี้ครับ $(window).load(); จะเป็นการสั่งให้สคริปท์ทำงานเมื่อหน้าเว็บทั้งหน้าโหลดเสร็จเรียบร้อยครับ คือสคริปท์จะรอให้ทุกอย่างบนหน้าเว็บโหลดเสร็จเรียบร้อย ทั้งภาพ วัตถุ หรือเฟรมต่างๆ แล้วจึงค่อยให้สคริปท์ทำงานครับ

แล้ววิธีไหน ใช้เมื่้อไหร่?

ถึงแม้ทั้งสองวิธีจะให้ผลลัพธิ์ที่ต่างกัน และสามารถใช้แทนกันได้ในหลายๆ กรณี (สำหรับบางคน อาจจะเป็นทุกกรณีด้วยซ้ำไป) แต่ก็มีบางจุดที่ต้องใช้แยกกันครับ

$(document).ready() นั้นจะใช้เมื่อ DOM ต่างๆโหลดเสร็จหมดแล้ว และงานที่เราต้องทำต้องารเพียงแค่นี้ อย่างเช่นการดึงเนื้อหามาใส่ใน element ที่เราไม่จำเป็นจะต้องรอให้ทุกอย่างบนหน้าเว็บโหลดเสร็จก่อน เราสามารถเอามาใช้งานในนี้ได้ครับ

$(window).load() จะใช้เมื่อเราต้องการทำงานที่จำเป็นจะต้องให้ทุกอย่างบนหน้าเว็บโหลดเสร็จก่อน (ซึ่งที่ผมใช้บ่อยสุดก็จะเป็นเรื่องของการอัพเดทค่า width, height, หรือตำแหน่งของ element ต่างๆ) ซึ่งตามลำดับแล้ว คำสั่งนี้จะทำงานหลัง $(document).ready() ครับ

จบ. จดไว้กันลืม

Posted by Jirayu

WordPress Developer ที่พอมีประสบการณ์อยู่บ้าง วันไหนไม่ทำงานอยู่บ้านว่างๆ ก็นั่งเลี้ยงแมว

Comments