lazy-load-คืออะไร

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

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
  • ให้เราเปลี่ยนเป็น custom attribute แบบนี้ครับ

    จากโค๊ด html ด้านบน เราได้สร้าง img element ขึ้นมา แต่ไม่ใช้งาน src attribute เพราะทำให้รูปโหลดทันที เปลี่ยนไปเป็นเก็บรูปไว้ใน data-src เพื่อไว้ใช้งานในภายหลัง และได้สร้าง class ชื่อว่า lazy เพื่อไว้ให้ jquery สั่งงานในภายหลัง

  • สั่งให้โหลดรูปเมื่อจำเป็นเท่านั้น
  • เราได้ตั้งค่าต่าง ๆ ให้กับ img element แล้ว เมื่อถึงจังหวะที่ต้องการให้โหลดรูปมาแสดงเราก็สามารถใช้ jQuery สั่งให้โหลดได้ด้วยคำสั่งดังนี้


ทดลองใช้งาน jquery.lazyload.js ร่วมกับ bxSlider.js

  • ดาวน์โหลด bxSlider.js
  • bxSlider.js เป็น jquery plugin ไว้สำหรับทำสไลด์แบบ responsive ซึ่งท่านสามารถดาวน์โหลดได้ที่เว็บไซต์หลักของ plugin เลยคือ bxslider.com

  • ดาวน์โหลด jquery.lazyload.js
  • jquery.lazyload.js เป็น jquery plugin ไว้สำหรับทำ lazy load โดยเฉพาะ ซึ่งท่านสามารถดาวน์โหลดได้ที่เว็บไซต์ github ตามลิงค์นี้ครับ https://github.com/tuupola/jquery_lazyload

  • ใส่ lazy คลาสใน img element
  • การตั้งค่า img element เพื่อใช้งาน jquery.lazyload.js ไม่ได้มีอะไรแตกต่างไปจากการใช้งานปกติ เพียงแต่ต้องตั้งชื่อ custom attribute ให้ตรงกับตัว plugin นั่นคือเปลี่ยนจาก data-src เป็น data-original จะเขียนโค๊ดได้ดังนี้

  • สั่งให้ lazy ทำงานเมื่อ bxSlider.js ทำงานในหน้านั้น ๆ



การใช้งาน lazy load เป็นสิ่งจำเป็นและสำคัญมาก ๆ สำหรับนักพัฒนาเว็บไซต์ เราจะเห็นความต่างของการโหลดหน้าเว็บชัดเจนมากขึ้น เมื่อเว็บไซต์นั้นมีการใช้งานข้อมูลใน 1 หน้าปริมาณมาก ๆ การบริการจัดการทรัพยากรให้ดี เป็นมิตรกับผู้ใช้งานเป็นส่วนหนึ่งของการทำ SEO ให้ได้ประสิทธิภาพ

Lazy Load สำหรับ WordPress

สำหรับ wordpress นั้นจะมี lazy load plugin ให้เลือกใช้งานอยู่หลายตัวท่านสามารถค้นหาในเมนู plugin และทดสอบติดตั้งเองได้เลย ตัวอย่าง plugin https://th.wordpress.org/plugins/lazy-load/

กระทู้ใกล้เคียง

HTML5 Video ทำวีดีโอให้เป็นพื้นหลัง... HTML5 Video ทำวีดีโอให้เป็นพื้นหลัง อีกหนึ่งเทคนิคการทำเว็บไซต์สมัยใหม่ที่นิยมทำกันมากมายในปัจจุบัน เป็นลูกเล่นการทำเว็บไซต์ที่ดึงดูดผู้เข้าชมเว็บไ...
เว็บไซต์สมัยใหม่ กับ 5 องค์ประกอบหลักที่ควรมี... เว็บไซต์สมัยใหม่ กับ 5 องค์ประกอบหลักที่ควรมี ปฏิเสธไม่ได้ว่า ปัจจุบันสื่อออนไลน์ในรูปแบบต่าง ๆ เว็บไซต์ สื่อสังคม ออนไลน์แอพพลิเคชั่น ก้าวเข้ามามี...
Webfont ภาษาไทย จัดการให้ใช้งานได้ทุก Browser... Webfont ภาษาไทย จัดการให้ใช้งานได้ทุก Browser ต้องเข้าใจว่าปัจจุบันมีจำนวนเบราว์เซอร์ให้ผู้ใช้งานอินเตอร์เนตเลือกใช้งานอยู่หลายค่ายและแต่ละเบราว์...
วิธีทำเว็บ ให้โหลดเร็ว เทคนิคเพิ่มความเร็วให้เว็บไ... วิธีทำเว็บ ให้โหลดเร็ว เทคนิคเพิ่มความเร็วให้เว็บไซต์ วิธีทำเว็บ ให้โหลดเร็ว เคยไหมครับที่คลิกลิงค์ข่าวจาก facebook เพราะอ่านคำโปรยแล้ว อยากจะเข้...