ความแตกต่างเล็กๆ น้อยๆ ของ Ready และ Load Events

วันนี้ผมจะเสนอข้อแตกต่างเล็กๆ ของสอง Event ก็คือ ready และ load

ตัวแรกก็คือ $(document).ready(function () {

 $(document).ready(function () {
    //จะทำงานก็ต่อเมื่อ Dom โหลดเสร็จพร้อมใช้
  });//End ready

ส่วน Dom มันย่อมากจาก Document Object Model (DOM) ส่วนส่วนว่าคืออะไรสามารถดูที่  HTML DOM  นี่ได้เลย<<  ผมว่าเขาอธิบายละเอียดดี (ดีดีไม่ต้องเขียนเรื่องนี้ อิอิ)

ตัวที่สองคือ load

$(window).on("load", function(){
  //จะทำงานเมื่อทุกอย่างโหลดเสร็จ ทุกอย่างในที่นี้รวมรูปภาพด้วย
});

ซึ่งโดยปกติแล้วถ้าเราใช้ Jquery เรามักจะชอบใช้ $(document).ready(function (){…});  แต่ในบางสถานะการเช่นตัวอย่างข้างล่างเราอาจจำเป็นต้องใช้ $(window).on(“load”, function(){…..}); จาก youtube ด้านล่างๆ จังหวะที่เราเห็น WebSite ด้านล่างในวินาทีแรกนั่นคือ Dom โหลดเสร็จแล้วจะเกิด Evnet ของ ready แต่รูปยังโหลดไม่เสร็จพอหลังจาก โหลดทุกอย่างครบก็จะเกิด Event load ตามลำดับ

แล้วเราจะใช้ประโยชน์ยังไงจากมัน จาก youtube เราก็เห็นว่าการแสดง layout ของ Site มันไม่เป็นระเบียบ กะจัดกะจายด้วยที่ว่ามันรอโหลดรูปขนาดใหญ่ ซึ่งดูแล้วมันมองไม่ค่อยสวยสักเท่าไหรซึ่งทำ User ได้รับประสบการณ์ที่ไม่ค่อยดีสักเท่าไหร  โดย Site บาง Site ที่เจอปัญหานี้ก็จะใช้เขาก็ใช้เทคนิดทำ Preload หน้าจอรอให้ทุกอย่างโหลดเสร็จแบบเรียบร้อยแล้วค่อยแสดงทีเดียวเลย

ถ้าอย่างสถานะการด้านบนก็ต้องใช้ load  Event มันถึงจะ Work!!!! นะครับ

$(window).on("load", function(){

Post นี่ก็แค่อยากให้รู้ว่า ready ทำก่อน load ครับผม

 

 

หวังว่าคงจะมีประโยชน์