ใน javascript มีฟังก์ชัน image ที่สามารถนำมาใช้ในการสร้าง preload images เมื่อเราทำการสร้าง Image Object และกำหนด src ของตำแหน่งภาพ บราวเซอร์จะทำการเรียก image นั้นและทำการบันทึกไว้ใน cache และเมื่อมีการเรียกใช้รูปเดิมนั้นอีกครั้ง บราวเซอร์ก็จะทำการดึงรูปภาพจาก cache มาแทนการโหลดรูปภาพนั้นใหม่ ทำให้สามารถแสดงผลรูปภาพได้เร็วกว่าเดิม
Javascript Code สำหรับสร้าง Preload Image
1 2 3 4 | <script type="text/javascript">var img = new Image();img.src = 'yourimg.gif';</script> |
ถ้ารูปที่ต้องการทำ preload มีจำนวนมาก เราสามารถที่จะทำการ cache รูปเหล่านั้นด้วยการใช้ for loop และถ้า image มีนามสกุล เหมือนๆ กัน เราสามารถเพิ่มประสิทธิภาพให้กับ code ด้วยการเพิ่มนามสกุลรูปภาพในขั้นตอนการกำหนด src แทนการกำหนด นามสกุลไฟล์รูป ในชื่อรูปภาพโดยตรง
Javascript Code กรณีมีหลายรูปภาพ และนามสกุลไฟล์รูปเหมือนกันในที่นี้เป็น gif
1 2 3 4 5 6 7 8 | <script type="text/javascript">var imgNames = ['car', 'bus', 'boat', 'sun']; // กำหนดชื่อรูปภาพ กรณีรูปภาพมีนามสกุลเหนือนกัน จะกำหนดแต่ชื่อvar imgObjects = []; // สร้าง ตัวแปร array ไว้กำหนด Image Objectfor (var i = 0; i < imgNames.length; i++){ // วนลูปสร้าง preload image imgObjects[i] = new Image(); imgObjects[i].src = imgNames[i] + '.gif';}</script> |
Javascript Code กรณีมีหลายรูปภาพ และนามสกุลไฟล์รูปเไม่หมือนกัน
1 2 3 4 5 6 7 8 | <script type="text/javascript">var imgNames = ['car.gif', 'bus.png', 'boat.jpg', 'sun.jpg']; // กำหนดชื่อรูปภาพ กรณีรูปภาพมีนามสกุลไม่เหนือนกัน จะกำหนดชื่อและนามสกุลรูปภาพvar imgObjects = []; // สร้าง ตัวแปร array ไว้กำหนด Image Objectfor (var i = 0; i < imgNames.length; i++){ // วนลูปสร้าง preload image imgObjects[i] = new Image(); imgObjects[i].src = imgNames[i]; }</script> |
