Kod kesan pemuatan halaman web JS berdasarkan kemahiran Ajax

Kod kesan pemuatan halaman web JS berdasarkan kemahiran Ajax_javascript

WBOY

Lepaskan： 2016-05-16 15:34:49

asal

1368 orang telah melayarinya

Contoh dalam artikel ini menerangkan kod kesan pemuatan halaman web yang dilaksanakan oleh JS berdasarkan Ajax. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Ini adalah kesan pemuatan web yang sangat baik Ia sering digunakan dalam reka bentuk web interaktif Ajax. Klik butang untuk muncul kotak Memuatkan Jika halaman web ditutup apabila kotak Pemuatan tidak dimuatkan akan muncul, yang berguna untuk beberapa pemprosesan Interaktif halaman web yang memerlukan prestasi keselamatan yang tinggi, seperti operasi pembayaran.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/js-ajax-web-loading-style-codes/

Kod khusus adalah seperti berikut:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>很不错的网页Ajax Loading效果</title>
</head>
<BODY STYLE="FONT-SIZE: 10pt; FONT-FAMILY: Verdana, Arial, Helvetica">
<SCRIPT LANGUAGE="JScript">
var NUMBER_OF_REPETITIONS = 40;
var nRepetitions = 0;
var g_oTimer = null;
function startLongProcess()
{
  divProgressDialog.style.display = "";
  resizeModal();
  btnCancel.focus();
  window.onresize = resizeModal;
  window.onbeforeunload = showWarning;
  continueLongProcess();
}
function updateProgress(nNewPercent)
{
  divProgressInner.style.width = (parseInt(divProgressOuter.style.width)
   * nNewPercent / 100)+ "px";
}
function stopLongProcess()
{
  if (g_oTimer != null)
  {
   window.clearTimeout(g_oTimer);
   g_oTimer = null;
  }
  // Hide the fake modal DIV
  divModal.style.width = "0px";
  divModal.style.height = "0px";
  divProgressDialog.style.display = "none";
  // Remove our event handlers
  window.onresize = null;
  window.onbeforeunload = null;
  nRepetitions = 0;
}
function continueLongProcess()
{
  if (nRepetitions < NUMBER_OF_REPETITIONS)
  {
   var nTimeoutLength = Math.random() * 250;
   updateProgress(100 * nRepetitions / NUMBER_OF_REPETITIONS);
   g_oTimer = window.setTimeout("continueLongProcess();", nTimeoutLength);
   nRepetitions++;
  }
  else
  {
   stopLongProcess();
  }
}
function showWarning()
{
  return "Navigating to a different page or refreshing the window could cause you to lose precious data.\n\nAre you*absolutely* certain you want to do this&#63;";
}
function resizeModal()
{
  divModal.style.width = document.body.scrollWidth;
  divModal.style.height = document.body.scrollHeight;
  divProgressDialog.style.left = ((document.body.offsetWidth -
divProgressDialog.offsetWidth) / 2);
  divProgressDialog.style.top = ((document.body.offsetHeight -
divProgressDialog.offsetHeight) / 2);
}
</SCRIPT>
<INPUT TYPE="BUTTON" VALUE="Click Me!" onclick="startLongProcess();">
<!-- BEGIN PROGRESS DIALOG -->
<DIV STYLE="BORDER: buttonhighlight 2px outset; FONT-SIZE: 8pt; Z-INDEX:
4; FONT-FAMILY: Tahoma; POSITION: absolute; BACKGROUND-COLOR: buttonface;
DISPLAY: none; WIDTH: 350px; CURSOR: default" ID="divProgressDialog"
onselectstart="window.event.returnValue=false;">
  <DIV STYLE="PADDING: 3px; FONT-WEIGHT: bolder; COLOR: captiontext;
BORDER-BOTTOM: white 2px groove; BACKGROUND-COLOR: activecaption">
   加载中……  </DIV>
  <DIV STYLE="PADDING: 5px">
   请稍等，网页正在处理中……
  </DIV>
  <DIV STYLE="PADDING: 5px">
   可能需要数秒钟.
  </DIV>
  <DIV STYLE="PADDING: 5px">
     <DIV ID="divProgressOuter" STYLE="BORDER: 1px solid threedshadow;
WIDTH: 336px; HEIGHT: 15px">
      <DIV ID="divProgressInner" STYLE="COLOR: white; TEXT-ALIGN:
center; BACKGROUND-COLOR: infobackground; MARGIN: 0px; WIDTH: 0px; HEIGHT:
13px;"></DIV>
     </DIV>
  </DIV>
  <DIV STYLE="BORDER-TOP: white 2px groove; PADDING-BOTTOM: 5px; PADDING-TOP: 3px;
BACKGROUND-COLOR: buttonface; TEXT-ALIGN: center">
     <INPUT STYLE="FONT-FAMILY: Tahoma; FONT-SIZE: 8pt" TYPE="button"
ID="btnCancel" onclick="stopLongProcess();" VALUE="取消">
  </DIV>
</DIV>
<!-- END PROGRESS DIALOG -->
<!-- BEGIN FAKE MODAL DIV-->
<DIV ID="divModal"
  STYLE="BACKGROUND-COLOR: white; FILTER: alpha(opacity=75); LEFT: 0px; POSITION:
 absolute; TOP: 0px; Z-INDEX: 3"
  onclick="window.event.cancelBubble=true; window.event.returnValue=false;">
</DIV>
<!-- END FAKE MODAL DIV -->
</body>
</html>

Salin selepas log masuk

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan JavaScript.