เข้าใจว่าคงใช้ JQuery ร่วมกับ PHP นะครับ



keyword ผมก็ไม่แน่ใจเหมือนกัน แต่แนวคิดจะเป็นดังนี้



ใช้ PHP เปลี่ยน URL ของรูปภาพทั้งหมดให้เป็นรูปภาพ เปล่าๆทั้งหมด (blang.gif) จุดสำคัญคือ ต้องกำหนดขนาดของรูปภาพเสมอ เพื่อให้ browser เว้นระยะห่างของรูปกับ element ให้เหมาะสม เพื่อไม่ให้หน้าเว็บเปลี่ยนแปลงไปเมื่อรูปโหลดเสร็จ และให้นำ URL ของรูปภาพไปเก็บไว้กับ Attribute อื่น เช่น alt



ในขั้นตอนนี้ ต้องทำที่ PHP เท่านั้นนะครับ ห้ามใช้ Javascript ในการเปลี่ยนรูปภาพเด้ดขาด ซึ่งจะได้ source ประมานนี้



<img src="blank.gif" width="100" height="100" alt="http://www.xxx.com/imgsrc.jpg" />



ทั้งหมดที่กำหนดไว้ด้านบน จะทำให้เราได้เว็บที่ไม่มีรูปภาพ และหลังจาก ที่เว็บโหลดเสร็จ ก็ให้เราทำการเรียกใช้ Javascript เพื่อทำการอ่านรูปภาพทั้งหมดบนเว็บ และ อ่าน url ของรูปจาก alt และ ตำแหน่งของรูป



การแสดงรูปภาพ สามารถทำได้ด้วยการอ่านตำแหน่งของ scrollbar เทียบกับ ตำแหน่งของรูปด้วย Javascript (ผมไม่อธิบายลงไปถึงคำสั่งที่ใช้นะครับ) เมื่อถึงตำแหน่งที่ต้องแสดงรูปภาพ ก็ให้โหลดรูปมาแสดง



ตามแนวคิดผม เราอาจไม่จำเป็นต้องใช้ เทคนิคการเลื่อนไปจนเห็นรูปภาพ แล้วค่อยโหลดรูปภาพก้ได้ เนื่องจากวิธีนี้ในทางปฏิบัติิาจทำได้ยาก เราอาจทำแค่ โหลดรูปภาพด้วย Javascript หลังจากโหลดเว็บเสร็จ แล้วแสดงทันทีก็ได้ เนื่องจากมันจะช่วยให้เว็บโหลดในครั้งแรกได้เร็วเหมือนๆกัน

ขอบคุณครับ :D



จะลองสุ่มมั่วๆ หาวิธีนะครับ จะได้มาแบ่งปันกัน

ได้แล้วครับ ผมเจอ เป็น jQuery ครับ ชื่อว่า "jQuery Lazy Load" ครับ :D