Show Loading Page with JQuery

Jquery နဲ့ ajax ရေးတဲ့အခါမှာ loading ဆိုတာလေးပြဖို့အတွက်ပါ။ ကျွန်တော်တို့တွေအနေနဲ့ ajax loading လုပ်နေတဲ့အချိန်နဲ့ success ဖြစ်သွားတဲ့အချိန်အတွက် function ၂ ခု ရေးပေးရပါတယ်။ code ကတော့

loading.html ကို ဒီလိုရေးထားတယ်။

<html>
<head>
<title>Jquery Loading</title>
<script src='jquery.js' type='text/javascript'></script>
</head>
<body>
<div id="contentLoading" class="contentLoading">
<!-- <img src="loading.gif" alt="Loading data, please wait..."> -->
Loading....
</div>
<div id="contentArea">
</div>
<input type="button" id="load" value="Load">

</body>
</html>

loading.html ထဲမှာ jquery ကိုတော့ ဒီလိုရေးထားလိုက်တယ်။


<script type="text/javascript">
$(document).ready(function()
  { 
  $("#contentLoading").hide();
  $("#load").click(function(){$("#contentArea").load("test.php");});
});
$().ajaxSend(function(r,s){
  $("#contentLoading").show();
  });
$().ajaxStop(function(r,s){
  $("#contentLoading").fadeOut("fast");
  $("#load").fadeOut("fast");
  });
//-->
</script>

test.php ကိုတော့ ဒီလိုရေးထားတယ်။ sleep က ခဏလောက် wait ဖြစ်နေအောင်လေ။ ဒါမှ loading လုပ်လား မလုပ်လား မြင်ရမှာပေါ့။


//sleep 3 seconds
sleep(3);

echo "Work....";

အစအဆုံး code ကိုတော့ ဒီမှာ Download ချနိုင်ပါတယ်။

Leave a Comment Cancel reply