อ่าน Naruto 700 แปลไทย, อ่าน One Piece 782 แปลไทย, อ่าน Bleach 622 แปลไทย, อัพเดทข่าวประจำวันและข่าวไอที โหลดเพลง โหลดโปรแกรม คำคมโดนๆ

SMF & Programmer => Programmer => ข้อความที่เริ่มโดย: Admin ที่ กรกฎาคม 01, 2012, 07:56:27 pm

หัวข้อ: วิธีการสร้าง preloading images โหลดรูปภาพ ด้วย javascript อย่างง่าย
เริ่มหัวข้อโดย: Admin ที่ กรกฎาคม 01, 2012, 07:56:27 pm
ใน 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>