มี 2 แบบ
1. โหลดหน้าเว็บเสร็จเเล้วค่อยแสดงผลหน้าเว็บ ช่วงก่อนแสดงผลหน้าเว็บ ให้แสดงภาพ gif / code สวยๆ / ภาพ fade out ค่อยๆ เฟดออกไป
2. แบบ rediret หน้าไปที่หน้าต้องการ (fake เพราะไม่ได้คำนวณเวลาโหลดหน้าเว็บเสร็จจริงๆ) ทำเอา สวยๆ เท่ห์ๆ
<script>
function myHide()
{
document.getElementById('hidepage').style.display='block';//content ที่ต้องการแสดงหลังจากเพจโหลดเสร็จ
document.getElementById('hidepage2').style.display='none';//content ที่ต้องการแสดงระหว่างโหลดเพจ
}
</script>ตัวอย่าง
<head>
<script>
function myHide()
{
document.getElementById('hidepage').style.display='block';//content ที่ต้องการแสดงหลังจากเพจโหลดเสร็จ
document.getElementById('hidepage2').style.display='none';//content ที่ต้องการแสดงระหว่างโหลดเพจ
}
</script>
</head>
<body onload="myHide();">
<!--<div id="hidepage2" style="display:block;" align="center" width="100%"> -->
<!-- ทำให้อยู่กลาง-->
<div id="hidepage2" style="display:block; position: fixed; top: 50%; left: 50%;" align="center" width="100%">
<br>
<IMG SRC="loading.gif" WIDTH="100" HEIGHT="100" BORDER="0" ALT=""><br>
กรุณารอสักครู่...
</div>
<div id="hidepage" style="display:none;">
<table>
<tr><td>หน้าเพจโหลดเสร็จแล้ว</td></tr>
</table>
</div>
</body>jQuery load Content และคลิกลิ้งค์ให้ รีโหลดเนื้อหา ภายในหน้านั้นได้เลย
หน้าหลักสำหรับดึง Content มาแสดง main.php
<!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>Main</title>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
//แสดงข้อมูลตอนเพจโหลด
$("#loading_img").show(); //แสดงรูปภาพ loading
//ดึงข้อมูลในหน้า content.php มาแสดงใน #showcontent พร้อมส่งค่า id=1
$("#showcontent").load("content.php?id="+1,function(responseTxt,statusTxt,xhr){
if(statusTxt=="success") //หากดึงข้อมูลมาแสดงสำเร็จ
$("#loading_img").hide(); //ซ่อนรูปภาพ loading
});
//แสดงข้อมูลตอนคลิกลิ้งค์
$("body").on("click",".browse_page a",function(event){
event.preventDefault();
var url=$(this).attr("href");
//แสดงแบบปกติ
$("#loading_img").show(); //แสดงรูปภาพ loading
$("#showcontent").load(url,function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
$("#loading_img").hide(); //ซ่อนรูปภาพ loading
});
return false;
});
});
</script>
<h1>หน้า Main</h1>
<div id="showcontent">
<img src="img/loading_img.gif" id="loading_img" />
</div>
</body>
</html>หน้า Content.php
<h2>หน้า Content</h2> <?php echo "id=".$_GET["id"]; ?> <br /> <div class="browse_page"> <a href="content.php?id=1" >คลิกกำหนด id=1</a> | <a href="content.php?id=2" >คลิกกำหนด id=2</a> </div>
Bootstrap modal pop-up แบบกำหนดเวลาแสดงหลังจากโหลดหน้าเว็บแล้ว
จะกำหนดเพิ่มอีกกี่วินาทีก็ได้
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Auto Loading Bootstrap Modal on Page Load</title>
<!-- script modal popup -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- css -->
<style type="text/css">
/*modal css*/
/* fade ออกมาตรงกลางหน้าจอ
.fade {
opacity: 0;
-webkit-transition: opacity 1s linear;
transition: opacity 1s linear;
}
*/
/* fade left ออกมาจากทางซ้ายของหน้าจอ */
.modal.fade:not(.in) .modal-dialog {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
</style>
<script type="text/javascript">
/*
//onload show modal script ชุดนี้โหลดมาตรงๆ ไม่มีหน่วงเวลานะ
$(document).ready(function(){
$("#myModal").modal('show');
});
*/
//เรีกยก modal ออกมาแสดง
var show = function(){
$('#myModal').modal('show');
};
/* กำหนดเวลาหลังเปิดหน้าเว็บ ว่าจะให้แสดงหลังโหลดหน้าเว็บแล้วกี่วินาที เช่น 2000 = 2 วิ */
$(window).load(function(){
var timer = window.setTimeout(show,2000);
});
</script>
</head>
<body>
<!-- title -->
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 align="center"> devbanban.com </h2>
</div>
</div>
</div>
<!-- modal -->
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-sm"> <!-- กำหนดขนาดของ modal เพิ่มได้นะครับ เช่น xs, sm, md, lg -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"> devbanban.com </h4>
</div>
<div class="modal-body">
<p>ข้อความ..... </p>
เนื้อหา, รุปภาพ ฯลฯ
หรือเอาไปประยุกต์ใช้กับอะไรก็ได้ครับ
<br>
</div>
</div>
</div>
</div>
<!-- devbanban.com -->
</body>
</html><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
#overlay {
position: absolute;
top: 0px;
left: 0px;
background: #ccc;
width: 100%;
height: 100%;
opacity: .75;
filter: alpha(opacity=75);
-moz-opacity: .75;
z-index: 999;
background: #fff url(http://i.imgur.com/KUJoe.gif) 50% 50% no-repeat;
}
.main-contain{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
<div id="overlay"></div>
<div class="main-contain">
ส่วนนี้เป็นเนื้อหาของเว็บ
</div>
<script type="text/javascript">
$(function(){
$("#overlay").fadeOut();
$(".main-contain").removeClass("main-contain");
});
</script>ตัวอย่าง
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap/css/bootstrap.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
html,body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
#overlay {
position: absolute;
top: 0px;
left: 0px;
background: #ccc;
width: 100%;
height: 100%;
opacity: .75;
filter: alpha(opacity=75);
-moz-opacity: .75;
z-index: 999;
background: #fff url(http://i.imgur.com/KUJoe.gif) 50% 50% no-repeat;
}
.main-contain{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="overlay"></div>
<div class="main-contain">
<table class="table table-striped">
<tr>
<th>#</th>
<th>Topic</th>
<th>Date</th>
<th>View</th>
</tr>
<?php for($i=1;$i<=10000;$i++){?>
<tr>
<td><?=$i?></td>
<td>topic <?=$i?></td>
<td>Date <?=$i?></td>
<td>View <?=$i?></td>
</tr>
<?php } ?>
</table>
</div>
<script type="text/javascript">
$(function(){
$("#overlay").fadeOut();
$(".main-contain").removeClass("main-contain");
});
</script>
</body>
</html>เทส
http://www.ninenik.com/demo/test_loading.php
jQuery สร้าง preloading page หรือ loading image ก่อนแสดงหน้าเว็บ
การสร้าง preloading page หรือ loading image ในที่นี้ จะอาศัยการโหลด รูปภาพเป็นตัวกำหนด
เงื่อนไข เนื่องจากรูปภาพ หรือ img จะเป็นส่วนที่โหลดมาแสดงท้ายสุด หลักการคือ หาจำนวนรูปในหน้าเว็บนั้นๆ ว่าโหลดเสร็จเรียบร้อยแล้วหรือไม่ ถ้าโหลดเรียบร้อยแล้ว ให้ปิด ส่วนที่เป็น preloading page หรือ loading image ไป หรือกรณีทีรูปเกิดความผิดพลาดในการโหลด จากสาเหตุใดๆ ก็ตาม ให้ทำการปิด preloading page หรือ loading image ไปได้เลย
* การทดสอบที่เครื่อง หรือ ใช้ internet ความเร็วสูง หรือการโหลดหน้าเว็บนั้นเป็นครั้งที่สอง การโหลดหน้าเว็บจะเร็วกว่าเดิม เมื่อมีการ cache รูปภาพ ดังนั้น preloading page หรือ loading image อาจจะไม่แสดง
ตัวอย่าง
http://www.ninenik.com/demo/pre_loading_status.php
1. กำหนด css ที่จำเป็นตังนี้
<style type="text/css">
html,body{
height:100%;
margin:0;
padding:0;
}
/* กำหนด css ของส่วนที่ใช้เป็น loading */
div#loadPage{
position:fixed;
margin:auto;
left:0;
top:0;
width:100%;
height:100%;
color:#FFF;
background-color:#000;
z-index:500;
text-align:center;
}
</style>2. กำหนดรูปแบบของ ส่วน loading สามารถแทรกรูปภาพ หรือ กำหนดเป็นตัวอักษร ตามต้องการ โดยแทรกไว้ต่อจากแท็ก <body>
<body> <div id="loadPage"> <br /> <br /> <br /> Loding.......... </div> ..... ... เนือหาของเว็บไซต์
3. ส่วนของ Javascript Code
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
var imgLength=$("img").length; // หาจำนวนรูปทั้งหมด
var countImg=0; // สำหรับนับจำนวนรูปภาพที่โหลดแล้ว
$("img").each(function(){
var IndexID=$("img").index(this); // สำหรับทดสอบ ลบออกได้
$(this).load(function(){
countImg++;
$("#loadPage").append("<br>loaded img "+IndexID); // สำหรับทดสอบ ลบออกได้
console.log("loaded img "+IndexID); // สำหรับทดสอบ ลบออกได้
if(countImg==imgLength){ // เมื่อโหลดรูปทั้งหมดแล้วปิดตัว loading
$("#loadPage").hide();
}
});
// เมื่อเกิดข้อผิดพลาดในการโหลดให้ปิด loading เลย
$(this).error(function(){
$("#loadPage").hide();
});
});
});
</script>ใช้ปิดบังหน้าเพจของเราในขณะที่ยังโหลดมาไม่ครบสมบูรณ์
จะขึ้นเป็นข้อความ LOADING… เหมือน Gmail ตอนล็อกอิน
พอมันโหลดครบแล้วจะปรากฏเป็นหน้าสมบูรณ์ของเพจนั้นๆ ออกมา
<html>
<head>
<!-- ส่วนที่เพิ่มเข้ามา -->
<script language="JavaScript">
<!-- Begin
function loadImages() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hidepage').style.visibility = 'hidden';
} else {
if (document.layers) { // Netscape 4
document.hidepage.visibility = 'hidden';
} else { // IE 4
document.all.hidepage.style.visibility = 'hidden';
}
}
document.body.style.overflow = 'auto';
}
// End -->
</script>
<!-- จบส่วนที่เพิ่มเข้ามา -->
</head>
<!-- ตรงนี้สำคัญ เปลี่ยนจาก <body>ให้กลายเป็นตัวนี้แทน -->
<body OnLoad="loadImages()" style="overflow: hidden">
<!-- ข้อความแสดงการโหลด ควรอยู่ถัดจาก <body> -->
<div id="hidepage" style="position: absolute; left:0px; top:0px; background-color: #FFFFFF; layer-background-color: #FFFFFF; height: 100%; width: 100%; z-index: 20;">
<table width=100%><tr><td align="left"><span style="background-color: #CC0000; color: #FFFFFF"><b>LOADING...</b></span></td></tr></table></div>
<!-- จบข้อความ -->
<!-- ตรงนี้ก็เป็นเนื้อหาอื่นๆ ทั่วไปของเพจ -->
</body>
</html>เห็นบางที่ทำ loading แต่มันก็แค่ for loop เพิ่มตัวเลข % เฉยๆ แต่มันไม่กำลังโหลดจริงๆ
งั้นผมเอาอันนี้มาให้เพิ่ม
มันจะแสดงว่าโหลดได้เท่าไหร่ตรง bar ข้างล่าง (จำไม่ได้ว่าเรียกว่าอะไร)
CODE
<script LANGUAGE="JAVASCRIPT">
<!--
//<!-- Hide script from old browsers
function MM_showHideLayers() { //v3.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
obj.visibility=v; }
}
function MM_displayStatusMsg(msgStr) { //v1.0
status=msgStr;
document.MM_returnValue = true;
}
function MM_findObj(n, d) { //v4.0
var p,i,x;
if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n];
for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n);
return x;
}
// do your stuff ...
// Or you add dummy code to loop a counter for millions of times :-))
//initialFunc();
//End hiding script from old browsers -->
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</SCRIPT>
<!-- อันนี้เป็นส่วนข้อความที่จะแสดงหลังจากโหลดเสร็จแล้ว-->
<script language=VBScript>
Dim Bar, Line, SP
Bar = 0
Line = "|"
SP = 100
Function Window_onLoad()
Bar = 95
SP = 10
End Function
Function Count()
If Bar < 100 Then
Bar = Bar + 1
Window.Status = "Loading : " & Bar & "%" & " " & String(Bar, Line)
setTimeout "Count()", SP
Else
Window.Status = "ข้อความที่จะแสดง"
Document.Body.Style.Display = ""
End If
End Function
Call Count()
</script>โค้ดนี้ เหมาะสำหรับเว็บที่เป็นระบบ Layer หรือ อะไรที่ค่อนข้างจะเบี้ยวหรือเกิดปัญหาในกรณีที่เวลาโหลด มันจะไม่ตรง หรือโค้ดซับซ้อน
เพราะขณะดาวน์โหลดอยู่นั้น ผู้ใช้เองอาจจะคลิ๊กปุ่มขณะโหลดโค้ดยังไม่เสร็จเป็นได้ ผลคือ ผู้ใช้ กดปุ่มที่ยังไม่มีโค้ด แล้ว ก็จะอารมณ์เสียกัน
แต่ข้อเสียคือ กรณีสำหรับ Lowspeed internet เว็บก็จะยังไม่สามารถใช้งานได้จนกว่าจะโหลดเสร็จ
Steps to Create a CSS & jQuery Preloader
→ Download and include jQuery
→ Create the Preloader
→ Style the Preloader using CSS
→ Use jQuery to position the Preloader
→ Apply the Animation Effect using jQuery.
→ Hide the preloader when page loading is finished.
http://www.entheosweb.com/tutorials/css/preloader/default.asp