ผมสังเกตุหลายเว็บแล้วจะเห็นว่า เว็บที่มีรูปมากๆ ยังเปิดได้เร็วปกติ เพราะรูปภาพที่เรายังไม่เลื่อนลงไปดู ยังไม่โหลดมาแสดง
เอาง่ายๆตัวอย่างแบบ Google Images อ่ะครับ ที่มีรูปมากๆ รูปไหนที่ยังไม่แสดงจะเป็น สีเทาๆ
คือผมอยากรู้มันเรียกว่าอะไรอ่ะครับ ทำยังไงครับ :D
*ผมพยายามค้นหา google แล้วไม่รู้คีเวิร์ด ไม่รู้ว่าทำยังไงอ่ะครับ
เอาง่ายๆตัวอย่างแบบ Google Images อ่ะครับ ที่มีรูปมากๆ รูปไหนที่ยังไม่แสดงจะเป็น สีเทาๆ
คือผมอยากรู้มันเรียกว่าอะไรอ่ะครับ ทำยังไงครับ :D
*ผมพยายามค้นหา google แล้วไม่รู้คีเวิร์ด ไม่รู้ว่าทำยังไงอ่ะครับ
เข้าใจว่าคงใช้ 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 หลังจากโหลดเว็บเสร็จ แล้วแสดงทันทีก็ได้ เนื่องจากมันจะช่วยให้เว็บโหลดในครั้งแรกได้เร็วเหมือนๆกัน
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