Lazy Load เป็น plugin ของ jQuery ซึ่งจะหน่วงการโหลดรูปที่อยู่ในหน้าเว็บที่มีเนื้อหาเยอะๆ ยาวๆ รูปที่ผู้ใช้งานเว็บจะยังไม่ถูกโหลดจนกระทั่งเลื่อน scroll ลงไปถึงรูปจึงจะถูกโหลดจากเซิฟเวอร์ การใช้ Lazy Load บนเว็บไซต์ที่มีเนื้อหาขอหน้าเว็บเยอะๆ จะช่วยให้หน้าเว็บนั้นๆ โหลดเร็วขึ้น เพราะบราวเซอร์จะโหลดเฉพาะรูปที่กำลังแสดงให้ผู้ใช้งานเว็บดูอยู่เท่านั้น
วิธีการใช้งาน Lazy Load
1.ดาวน์โหลด Lazy Load ได้ที่ Lazy Load
2.เพิ่มโค้ด javascript อย่าลืมใส่ path ไปยัง lazy load ให้ถูกต้องนะครับ
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.lazyload.js"></script>
3.จากนั้นก็เปลี่ยนแท็ก img ที่ต้องการใช้งาน Lazy Load ของโค้ด html โดยใส่รูปหลอกที่มีขนาดเล็กๆ (1x1px) แทนที่ src ของรูปจริง และเพิ่ม attribute data-original ให้เก็บที่อยู่ของรูปจริงไว้
<img class="lazy" alt="" src="img/grey.gif" data-original="img/example.jpg" width="640" height="480" />
จากตัวอย่างรูปจริงคือ img/example.jpg และรูปหลอกคือ img/grey.gif
4.จากนั้นก็เรียกใช้ด้วย javascript ประมาณนี้ครับ
$("img.lazy").lazyload();
เท่านี้ก็เรียบร้อยครับ เพื่อนๆ สามารถเข้าไปดูฟีเจอร์เพิ่มเติมได้ที่ Lazy Load ครับผม ^^