Lazy Load คืออะไร รู้จักกับความขี้เกียจที่มีประโยชน์
Lazy Load คือคำเรียกของการจัดการกับทรัพยากร ( Resource ) บนเว็บไซต์เพื่อเพิ่มศักยภาพการทำงานของเว็บไซต์และลดการใช้งานหน่วยความจำเครื่อง client และ การโหลดข้อมูลจากฝั่ง server แบบใช้เท่าทีจำเป็นต้องใช้งานเท่านั้น เพื่อให้เว็บไซต์สามารถเข้าสู่หน้าเว็บในโหมดการใช้งานปกติได้เร็วขึ้น ตัวอย่างเช่น เมื่อเราต้องพัฒนาเว็บไซต์ที่มี Banner
Slide และในสไลด์นั้นมีไอเทมที่ต้องโหลดขึ้นมาแสดงจำนวน 4 รูป แต่ละรูปมีขนาด 1024×600 Pixel ประมาณขนาดของรูประมาณ 1MB เว็บไซต์ต้องเสียเวลาโหลดข้อมูลของทั้ง 4 รูปในหน้าเดียวรวมแล้วถึง 4MB ถ้าต้องรวมการโหลดกับ element อื่น ๆ ในหน้าเว็บไซต์นั้นอีก ทั้งข้อความ ไอคอน ไฟล์ css และไฟล์ js ก็จะยิ่งทำให้เว็บไซต์ใช้เวลาในการประมวลผลข้อมูลแบบเสร็จสิ้นทั้งหมดนานเกินไป
การใช้ lazy load เข้ามาจัดการจะทำให้เราสามารถประหยัดเวลาการโหลดหน้าเว็บไซต์และลดการใช้งานหน่วยความจำของเครื่องได้อย่างเห็นได้ชัดเจนมาก กล่าวคือ แทนที่เราจะโหลดรูปสไลด์พร้อมกันทั้ง 4 รูป แต่เปลี่ยนไปโหลดเพียงรูปเดียว คือรูปที่กำลังแสดงอยู่เท่านั้น หลักการทำงานของ lazy load ยังสามารถนำไปใช้งานกับข้อมูลอื่น ๆ ได้เช่นกัน ทั้งวีดีโอ ไฟล์เสียง เป็นต้น สำหรับในบทความนี้จะทดสอบการทำงานแบบ lazy load โดยยกตัวอย่างการทำงานกับข้อมูลแบบไฟล์ภาพ
วิธีใช้งาน lazy load กับรูปภาพ
การใช้งาน lazy load เราสามารถใช้งานได้แบบง่าย ๆ แบบไม่ต้องพึงพา jquery plugin เลยก็ได้นะครับ การใช้งานคือ เมื่อเราสร้างแท็ก img ขึ้นมา แทนที่เราจะใส่ path ของรูปลงไปใน src attribute ให้เปลี่ยนเป็นปล่อยสร้างและสร้าง custom attribute ขึ้นมาเก็บค่าของรูปแทน ตัวอย่างเช่น
- กำหนดค่าเริ่มต้น img element
<img src="images/logo.png"/>
ให้เราเปลี่ยนเป็น custom attribute แบบนี้ครับ
<img class="lazy" data-src="images/logo.png"/>
จากโค๊ด html ด้านบน เราได้สร้าง img element ขึ้นมา แต่ไม่ใช้งาน src attribute เพราะทำให้รูปโหลดทันที เปลี่ยนไปเป็นเก็บรูปไว้ใน data-src เพื่อไว้ใช้งานในภายหลัง และได้สร้าง class ชื่อว่า lazy เพื่อไว้ให้ jquery สั่งงานในภายหลัง
เราได้ตั้งค่าต่าง ๆ ให้กับ img element แล้ว เมื่อถึงจังหวะที่ต้องการให้โหลดรูปมาแสดงเราก็สามารถใช้ jQuery สั่งให้โหลดได้ด้วยคำสั่งดังนี้
var imgTag = $("img.lazy"); var imgPath = imgTag.attr("data-src"); imgTag.attr("src",imgPath);
ทดลองใช้งาน jquery.lazyload.js ร่วมกับ bxSlider.js
- ดาวน์โหลด bxSlider.js
- ดาวน์โหลด jquery.lazyload.js
- ใส่ lazy คลาสใน img element
bxSlider.js เป็น jquery plugin ไว้สำหรับทำสไลด์แบบ responsive ซึ่งท่านสามารถดาวน์โหลดได้ที่เว็บไซต์หลักของ plugin เลยคือ bxslider.com
jquery.lazyload.js เป็น jquery plugin ไว้สำหรับทำ lazy load โดยเฉพาะ ซึ่งท่านสามารถดาวน์โหลดได้ที่เว็บไซต์ github ตามลิงค์นี้ครับ https://github.com/tuupola/jquery_lazyload
การตั้งค่า img element เพื่อใช้งาน jquery.lazyload.js ไม่ได้มีอะไรแตกต่างไปจากการใช้งานปกติ เพียงแต่ต้องตั้งชื่อ custom attribute ให้ตรงกับตัว plugin นั่นคือเปลี่ยนจาก data-src เป็น data-original จะเขียนโค๊ดได้ดังนี้
<img class="lazy" data-original="images/logo.png"/>
var Config = { pager:false, infiniteLoop: false, hideControlOnEnd: true, onSlideAfter: function($slideElement, oldIndex, newIndex){ $("img.lazy").lazyload(); // สั่งให้โหลด img element ที่มี lazy คลาสทุก ๆ ครั้งที่ bxslider เปลี่ยนหน้าเสร็จ } }; var slider = $(".bxslider").bxSlider(Config); // กำหนด class และใช้งานตั้งค่าของ bxslider $("img.lazy").lazyload(); // เริ่มทำงานสำหรับหน้าแรกของ bxslider
การใช้งาน lazy load เป็นสิ่งจำเป็นและสำคัญมาก ๆ สำหรับนักพัฒนาเว็บไซต์ เราจะเห็นความต่างของการโหลดหน้าเว็บชัดเจนมากขึ้น เมื่อเว็บไซต์นั้นมีการใช้งานข้อมูลใน 1 หน้าปริมาณมาก ๆ การบริการจัดการทรัพยากรให้ดี เป็นมิตรกับผู้ใช้งานเป็นส่วนหนึ่งของการทำ SEO ให้ได้ประสิทธิภาพ
Lazy Load สำหรับ WordPress
สำหรับ wordpress นั้นจะมี lazy load plugin ให้เลือกใช้งานอยู่หลายตัวท่านสามารถค้นหาในเมนู plugin และทดสอบติดตั้งเองได้เลย ตัวอย่าง plugin https://th.wordpress.org/plugins/lazy-load/