[jQuery] window.onload กับ $(document).ready ต่างกันยังไง

ใน Javascript เราสามารถกำหนดให้คำสั่งที่เราต้องการทำงานหลังจากหน้าเว็บโหลดเสร็จแล้วได้ โดยเขียนแบบนี้ครับ

window.onload = function() {
 // บลา ๆ
}

ส่วนถ้าใช้ jQuery เรามักจะใช้กันอยู่แล้ว นั่นคือ

$(document).ready(function() {
  // บลา ๆ
});

สาเหตุที่ต้องทำให้ JS ทำงานหลังจากหน้าเว็บไซต์โหลดเสร็จแล้ว คือ ฟังก์ชั่นที่ต้องเล่นกับ DOM (เช่น ดึงขนาด, ตำแหน่งของ Element) จะต้องให้หน้าเว็บโหลดเสร็จก่อนถึงจะสามารถทำได้ (ไม่งั้นจะ Error เพราะหา Element ไม่เจอ หรือได้ค่าผิด ๆ เพราะหน้าเว็บยัง render ไม่เสร็จ)

ซึ่งความแตกต่างระหว่าง window.onload กับ document.ready เกี่ยวข้องกับเรื่องนี้นี่เองครับ:

  • window.onload จะทำงานหลังจากทุกอย่างบนหน้าเว็บไซต์ (รวมรูปด้วย) โหลดเสร็จหมด
  • document.ready จะทำงานหลังจากทุกอย่างบนเว็บไซต์ (ไม่รวมรูป) โหลดเสร็จหมด

หรือพูดง่าย ๆ คือ พอ DOM โหลดเสร็จ -> รัน document.ready -> พอรูป และ Element อื่น ๆโหลดเสร็จ -> รัน window.onload ครับ ซึ่ง window.onload จะทำงานทีหลังเสมอ

อันนี้เป็นสิ่งที่ต้องจำเวลาเราเขียน JS ดึงขนาดรูปมาใช้ ต้องใส่ใน window.onload เท่านั้น เพราะ ถ้าใส่ใน document.ready มันจะทำงานก่อนรูปโหลดเสร็จ กลายเป็นไม่ได้ขนาดรูปที่ต้องการมาครับ

นอกจากนั้นอย่าลืมว่า window.onload สามารถใช้ได้เลยโดยไม่ต้องมี jQuery ส่วน $(document).ready ต้องมี jQuery ด้วยนะครับ

ที่มา:

http://stackoverflow.com/questions/3698200/window-onload-vs-document-ready

Leave a Reply

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