ใน 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