แนะนำ Lazy Load – jQuery’s Plugin

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 ครับผม ^^