<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script src="jquery.js"></script> <script> keep_width = 1; function stop_preload(){ $('div.c1').css('background-color','green'); $('div.c1').css('width','100px'); // ตั้งค่าให้กราฟ 100 % ไปเลย $('span.c1').text("100 %"); clearInterval(t); // หยุดการวิ่งของกราฟ } function play_preload(){ $('div.c1').css('width',keep_width+'px'); $('span.c1').text(keep_width+" %"); $('span.c2').text(keep_width+" %"); if(keep_width > 60){ // ถ้า 60 เปอร์เซนเป็นสี เขียว $('div.c1').css('background-color','green'); } else if(keep_width > 40){ // ถ้า 40 สีส้ม $('div.c1').css('background-color','orange'); } if(keep_width == 100){ // โหลดถึง 100 ให้หยุด stop_preload(); } else{ keep_width = keep_width+1; // บวกเปอร์เซนไปเรื่อยๆ } } window.onload = stop_preload ; // ถ้าข้อมูลทั้งหมดถูกโหลดมาหมดแล้วก็ให้ เสร็จสิ้นการโหลดไปเลย </script> </head> <body> <div class="c1" style="background-color:#FF0000;width:0px; height:20px"></div> <br/> โหลดเสร็จสมบูรณ์ <span class="c1"></span> <br/> ใช้เวลาในการในการโหลด <span class="c2"></span> ถึงเสร็จสิ้น <br/><br/> <script> t = setInterval('play_preload()',50) ; </script> <span style="color:#FF0000"> หมายเหตุ จะเห็นความเปลี่ยนแปลง ต้องมีข้อมูลที่เยอะหรือใช้เวลาในการโหลดนาน</span><br/><br/> <div class="images"><img src="http://www.entheosweb.com/tutorials/coreldraw/images/party_poster/party2.jpg" width="300"><br /></div> <div class="images"><img src="http://www.entheosweb.com/tutorials/coreldraw/images/illustrative_text/poster.jpg" width="300"><br /></div> </body> </html>
function stop_preload(){ $('div.c1').css('background-color','green'); $('div.c1').css('width','100px'); // ตั้งค่าให้กราฟ 100 % ไปเลย $('span.c1').text("100 %"); clearInterval(t); // หยุดการวิ่งของกราฟ $('div.c1').hide(); //ลองเพิ่มเล่นๆ }
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง
ก้อบไปใช้ซะเรยยย
