Lazy Load คืออะไร รู้จักกับความขี้เกียจที่มีประโยชน์

<h3>Lazy Load คืออะไร รู้จักกับความขี้เกียจที่มีประโยชน์<&sol;h3>&NewLine;<p><&sol;br><br &sol;>&NewLine;Lazy Load คือคำเรียกของการจัดการกับทรัพยากร &lpar; Resource &rpar; บนเว็บไซต์เพื่อเพิ่มศักยภาพการทำงานของเว็บไซต์และลดการใช้งานหน่วยความจำเครื่อง client และ การโหลดข้อมูลจากฝั่ง server แบบใช้เท่าทีจำเป็นต้องใช้งานเท่านั้น เพื่อให้เว็บไซต์สามารถเข้าสู่หน้าเว็บในโหมดการใช้งานปกติได้เร็วขึ้น ตัวอย่างเช่น เมื่อเราต้องพัฒนาเว็บไซต์ที่มี Banner <&excl;--more--><&sol;p>&NewLine;<p>Slide และในสไลด์นั้นมีไอเทมที่ต้องโหลดขึ้นมาแสดงจำนวน 4 รูป แต่ละรูปมีขนาด 1024&&num;215&semi;600 Pixel ประมาณขนาดของรูประมาณ 1MB เว็บไซต์ต้องเสียเวลาโหลดข้อมูลของทั้ง 4 รูปในหน้าเดียวรวมแล้วถึง 4MB ถ้าต้องรวมการโหลดกับ element อื่น ๆ ในหน้าเว็บไซต์นั้นอีก ทั้งข้อความ ไอคอน ไฟล์ css และไฟล์ js ก็จะยิ่งทำให้เว็บไซต์ใช้เวลาในการประมวลผลข้อมูลแบบเสร็จสิ้นทั้งหมดนานเกินไป<br &sol;>&NewLine;<br &sol;>&NewLine;การใช้ lazy load เข้ามาจัดการจะทำให้เราสามารถประหยัดเวลาการโหลดหน้าเว็บไซต์และลดการใช้งานหน่วยความจำของเครื่องได้อย่างเห็นได้ชัดเจนมาก กล่าวคือ แทนที่เราจะโหลดรูปสไลด์พร้อมกันทั้ง 4 รูป แต่เปลี่ยนไปโหลดเพียงรูปเดียว คือรูปที่กำลังแสดงอยู่เท่านั้น หลักการทำงานของ lazy load ยังสามารถนำไปใช้งานกับข้อมูลอื่น ๆ ได้เช่นกัน ทั้งวีดีโอ ไฟล์เสียง เป็นต้น สำหรับในบทความนี้จะทดสอบการทำงานแบบ lazy load โดยยกตัวอย่างการทำงานกับข้อมูลแบบไฟล์ภาพ<br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<h4>วิธีใช้งาน lazy load กับรูปภาพ<&sol;h4>&NewLine;<p>การใช้งาน lazy load เราสามารถใช้งานได้แบบง่าย ๆ แบบไม่ต้องพึงพา jquery plugin เลยก็ได้นะครับ การใช้งานคือ เมื่อเราสร้างแท็ก img ขึ้นมา แทนที่เราจะใส่ path ของรูปลงไปใน src attribute ให้เปลี่ยนเป็นปล่อยสร้างและสร้าง custom attribute ขึ้นมาเก็บค่าของรูปแทน ตัวอย่างเช่น<&sol;p>&NewLine;<ul>&NewLine;<li><strong>กำหนดค่าเริ่มต้น img element <&sol;strong><&sol;li>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;img src&equals;"images&sol;logo&period;png"&sol;&gt&semi;<&sol;pre>&NewLine;<p>ให้เราเปลี่ยนเป็น custom attribute แบบนี้ครับ<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;img class&equals;"lazy" data-src&equals;"images&sol;logo&period;png"&sol;&gt&semi;<&sol;pre>&NewLine;<p>จากโค๊ด html ด้านบน เราได้สร้าง img element ขึ้นมา แต่ไม่ใช้งาน src attribute เพราะทำให้รูปโหลดทันที เปลี่ยนไปเป็นเก็บรูปไว้ใน data-src เพื่อไว้ใช้งานในภายหลัง และได้สร้าง class ชื่อว่า lazy เพื่อไว้ให้ jquery สั่งงานในภายหลัง<&sol;p>&NewLine;<li><strong>สั่งให้โหลดรูปเมื่อจำเป็นเท่านั้น<&sol;strong><&sol;li>&NewLine;<p>เราได้ตั้งค่าต่าง ๆ ให้กับ img element แล้ว เมื่อถึงจังหวะที่ต้องการให้โหลดรูปมาแสดงเราก็สามารถใช้ jQuery สั่งให้โหลดได้ด้วยคำสั่งดังนี้<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " > &NewLine;var imgTag &equals; &dollar;&lpar;"img&period;lazy"&rpar;&semi; &NewLine;var imgPath &equals; imgTag&period;attr&lpar;"data-src"&rpar;&semi; &NewLine;imgTag&period;attr&lpar;"src"&comma;imgPath&rpar;&semi;<&sol;pre>&NewLine;<&sol;ul>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>ทดลองใช้งาน jquery&period;lazyload&period;js ร่วมกับ bxSlider&period;js<&sol;h4>&NewLine;<ul>&NewLine;<li><strong><a href&equals;"http&colon;&sol;&sol;bxslider&period;com" target&equals;"&lowbar;blank">ดาวน์โหลด bxSlider&period;js<&sol;a><&sol;strong><&sol;li>&NewLine;<p>bxSlider&period;js เป็น jquery plugin ไว้สำหรับทำสไลด์แบบ responsive ซึ่งท่านสามารถดาวน์โหลดได้ที่เว็บไซต์หลักของ plugin เลยคือ <a href&equals;"http&colon;&sol;&sol;bxslider&period;com" target&equals;"&lowbar;blank">bxslider&period;com<&sol;a><&sol;p>&NewLine;<li><strong><a href&equals;"https&colon;&sol;&sol;github&period;com&sol;tuupola&sol;jquery&lowbar;lazyload" target&equals;"&lowbar;blank">ดาวน์โหลด jquery&period;lazyload&period;js<&sol;a><&sol;strong><&sol;li>&NewLine;<p>jquery&period;lazyload&period;js เป็น jquery plugin ไว้สำหรับทำ lazy load โดยเฉพาะ ซึ่งท่านสามารถดาวน์โหลดได้ที่เว็บไซต์ github ตามลิงค์นี้ครับ <a href&equals;"https&colon;&sol;&sol;github&period;com&sol;tuupola&sol;jquery&lowbar;lazyload" target&equals;"&lowbar;blank">https&colon;&sol;&sol;github&period;com&sol;tuupola&sol;jquery&lowbar;lazyload<&sol;a><&sol;p>&NewLine;<li><strong>ใส่ lazy คลาสใน img element<&sol;strong><&sol;li>&NewLine;<p>การตั้งค่า img element เพื่อใช้งาน jquery&period;lazyload&period;js ไม่ได้มีอะไรแตกต่างไปจากการใช้งานปกติ เพียงแต่ต้องตั้งชื่อ custom attribute ให้ตรงกับตัว plugin นั่นคือเปลี่ยนจาก data-src เป็น data-original จะเขียนโค๊ดได้ดังนี้<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;img class&equals;"lazy" data-original&equals;"images&sol;logo&period;png"&sol;&gt&semi;<&sol;pre>&NewLine;<li><strong>สั่งให้ lazy ทำงานเมื่อ bxSlider&period;js ทำงานในหน้านั้น ๆ<&sol;strong> <&sol;li>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >var Config &equals; &lbrace; &NewLine;&Tab;pager&colon;false&comma; &NewLine;&Tab;infiniteLoop&colon; false&comma; &NewLine;&Tab;hideControlOnEnd&colon; true&comma; &NewLine;&Tab;onSlideAfter&colon; function&lpar;&dollar;slideElement&comma; oldIndex&comma; newIndex&rpar;&lbrace; &NewLine;&Tab;&Tab;&dollar;&lpar;"img&period;lazy"&rpar;&period;lazyload&lpar;&rpar;&semi; &sol;&sol; สั่งให้โหลด img element ที่มี lazy คลาสทุก ๆ ครั้งที่ bxslider เปลี่ยนหน้าเสร็จ &NewLine; &rcub; &NewLine;&rcub;&semi; &NewLine;var slider &equals; &dollar;&lpar;"&period;bxslider"&rpar;&period;bxSlider&lpar;Config&rpar;&semi; &sol;&sol; กำหนด class และใช้งานตั้งค่าของ bxslider &NewLine;&dollar;&lpar;"img&period;lazy"&rpar;&period;lazyload&lpar;&rpar;&semi; &sol;&sol; เริ่มทำงานสำหรับหน้าแรกของ bxslider<&sol;pre>&NewLine;<&sol;ul>&NewLine;<p><&sol;br><br &sol;>&NewLine;การใช้งาน lazy load เป็นสิ่งจำเป็นและสำคัญมาก ๆ สำหรับนักพัฒนาเว็บไซต์ เราจะเห็นความต่างของการโหลดหน้าเว็บชัดเจนมากขึ้น เมื่อเว็บไซต์นั้นมีการใช้งานข้อมูลใน 1 หน้าปริมาณมาก ๆ การบริการจัดการทรัพยากรให้ดี เป็นมิตรกับผู้ใช้งานเป็นส่วนหนึ่งของการทำ SEO ให้ได้ประสิทธิภาพ<br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<h4>Lazy Load สำหรับ WordPress<&sol;h4>&NewLine;<p>สำหรับ wordpress นั้นจะมี lazy load plugin ให้เลือกใช้งานอยู่หลายตัวท่านสามารถค้นหาในเมนู plugin และทดสอบติดตั้งเองได้เลย ตัวอย่าง plugin <a href&equals;"https&colon;&sol;&sol;th&period;wordpress&period;org&sol;plugins&sol;lazy-load&sol;" target&equals;"&lowbar;blank">https&colon;&sol;&sol;th&period;wordpress&period;org&sol;plugins&sol;lazy-load&sol;<&sol;a><br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;