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