หน้าหลัก โค้ด-บทความ php โค้ด-บทความ javascript โค้ด-บทความ css สารบัญ สารบัญ

ทักทายครับ

สวัสดีครับ หลังจากที่ blog นี้หยุดการอัพเดททบความเกี่ยวกับโค้ดในการใช้ทำเวปไปนานไม่ว่าจะเป็น code php, html, javascript, css, ajax เนื่องจากผมไม่ค่อยมีเวลาจนลืม blog นี้ไปเลย นึกขึ้นได้ตอนปีใหม่ ไปค้นหาใน google แล้วตกใจ เนื่องจาก blog นี้ไปอยู่ลำดับที่ 1 ของการค้นหา ไม่เชื่อลองดู เลยขอถือโอกาสเริ่มต้นใหม่ในช่วงปีใหม่นี้เริ่มอัพเดทบทความตั้งแต่ตอนนี้เป็นต้นไป หวังเป็นอย่างยิ่งว่าจะมีผู้ติดตามบทความของผมต่อไปน่ะครับ ปล.ท่านใดสนใจลงโฆษณาสามารถติดต่อได้ที่ hotcodephp@gmail.com

20 ส.ค. 2555

การทำหน้ารอระหว่างโหลดข้อมูล (preloader)

หลายท่านคงเคยเข้าเวปแล้วเจอหน้าที่บอกสถานะการโหลดหน้า webpage ก่อนที่จะเข้าหน้าเวปจริงใช่ไหมครับ วันนี้เรามาลองทำโดยใช้โค้ด javascript เข้ามาช่วย ซึ่งลักษณะการทำงานของมันก็คือ เวลาเข้าเวปจะมีรูปขึ้นระหว่างรอโหลดหน้าเวป เมื่อรอสักพักก็จะเข้าหน้าเวปจริงเลย ซึ่งมีข้อดีมันจะไม่แสดง url ที่แท้จริงของหน้าเวปหลักของเรา มาดูโค้ดตัวอย่างกันครับ

code หน้า index.html

<!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>Ajax Preloader example</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="max.js"></script>
</head>

<body onload="loadSite();" id="myBody">
   <div id="loader"><img src="loader.gif" border="1"/></div>
</body>

รูปตัวอย่าง



ส่วนอันนี้เป็นไฟล์ตัวย่างน่ะครับ download

ไม่มีความคิดเห็น: