ผู้เขียน หัวข้อ: วิธีการสร้าง preloading images โหลดรูปภาพ ด้วย javascript อย่างง่าย  (อ่าน 3000 ครั้ง)

0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้

ออฟไลน์ Admin

  • Administrator
  • *****
  • กระทู้: 1415
  • Level:
    0%
  • Thank : 61
  • เพศ: ชาย
    • ดูรายละเอียด
    • สะกิดข่าว
ใน javascript มีฟังก์ชัน image ที่สามารถนำมาใช้ในการสร้าง preload images เมื่อเราทำการสร้าง Image Object และกำหนด src ของตำแหน่งภาพ บราวเซอร์จะทำการเรียก image นั้นและทำการบันทึกไว้ใน cache และเมื่อมีการเรียกใช้รูปเดิมนั้นอีกครั้ง บราวเซอร์ก็จะทำการดึงรูปภาพจาก cache มาแทนการโหลดรูปภาพนั้นใหม่ ทำให้สามารถแสดงผลรูปภาพได้เร็วกว่าเดิม

Javascript Code สำหรับสร้าง Preload Image

โค๊ด: [Select]
<script type="text/javascript"> 
    var img = new Image(); 
    img.src = 'yourimg.gif'; 
    </script> 

ถ้ารูปที่ต้องการทำ preload มีจำนวนมาก เราสามารถที่จะทำการ cache รูปเหล่านั้นด้วยการใช้ for loop และถ้า image มีนามสกุล เหมือนๆ กัน เราสามารถเพิ่มประสิทธิภาพให้กับ code ด้วยการเพิ่มนามสกุลรูปภาพในขั้นตอนการกำหนด src แทนการกำหนด นามสกุลไฟล์รูป ในชื่อรูปภาพโดยตรง

Javascript Code กรณีมีหลายรูปภาพ และนามสกุลไฟล์รูปเหมือนกันในที่นี้เป็น gif

โค๊ด: [Select]
<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 กรณีมีหลายรูปภาพ และนามสกุลไฟล์รูปเไม่หมือนกัน

โค๊ด: [Select]
<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> 


 
แชร์บทความ...
โค้ดแบบ forum
(BBCode)
โค้ดแบบ site/blog
(HTML)