วิธีการสร้าง preloading images โหลดรูปภาพ ด้วย javascript อย่างง่าย

ใน 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>