งงๆๆ -*- ไม่รู้จะตั้งหัวเรื่องว่าอะไรดี เอาเป็นว่าดูจากตัวอย่างจะเข้าใจเองนะ ว่ามันจะทำงานประมาณว่า เมื่อเราเปิดเว็บที่ที่มีรูปภาพเยอะมากมายแล้วรูปจะแสดงให้เราตรงเฉพราะส่วนที่เราเห็นเท่านั้น ส่วนที่เรายังไม่เลื่อน Scroll ลงไปดูก็จะไม่โหลดออกมาแล้วมันก็มีประโยชน์ให้เว็บเร็วขึ้น ให้กินแบนวิทเบาขึ้นมาก

ตัวอย่างง่ายๆ ผ่านตาผู้ใช้เป็นล้านๆคนคือ Google Images ครับ มันเร็วใช่มั้ย สังเกตุง่ายๆรูปไหนไม่แสดงจะเป็นสีเทาๆ เข้าใจแล้วใช่ปะ

ตัวอย่างอีกอันครับ http://www.appelsiini.net/projects/lazyload/enabled_gazillion.html

++ วิธีการง่ายๆก็คือ Plugin ของ jQuery ครับชื่อว่า “jQuery Lazy Load”

• ทำการติดตั้ง jQuery ก่อนรุ่นใหม่ๆก็ดี
• ดึง Plugin Lazy Load มาใส่ตามเข้าไป

*จะได้ประมาณนี้
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

*ชุดคำสั่งครับ (จริงๆ แล้วดัดแปลงได้เยอะมากเลยจะยกมาสำคัญๆ นะครับ)

อันนี้จะเป็นการวางสีเทาลงไปขณะนี้ยังไม่มีการแสดงรูปครับ
$("img").lazyload({ placeholder : "img/grey.gif" });

อันล่างนี้คือตั้ง Effect ครับจะได้สวยๆ ศึกษา Effect ต่างๆได้ที่เว็บ jQuery.com
$("img").lazyload({
placeholder : "img/grey.gif",
effect : "fadeIn"
});

Download : Plugin Lazy Load เวอชั่นธรรมดา (ไว้ศึกษา) / เวอชั่นบีบอัดแล้ว (สำหรับใช้งาน)

อ่านต่อเพิ่มเติมได้เว็บล่างนี้เลยนะครับ เพียบ
ขอบคุณ http://www.appelsiini.net/projects/lazyload