本文实例讲述了JS基于Ajax实现的网页Loading效果代码。分享给大家供大家参考，具体如下：
这是一款很不错的网页Loading效果，常用于Ajax交互式网页设计中，点击按钮即可弹出Loading框，若Loading框未加载完成时关闭网页，会弹出确认提示框，用于一些对安全性能要求高的网页交互处理中，比如付款操作。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-ajax-web-loading-style-codes/
具体代码如下：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>很不错的网页Ajax Loading效果</title> </head> <BODY> <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.nnAre you*absolutely* certain you want to do this"; } 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!"> <> <DIV ID="divProgressDialog" onselectstart="window.event.returnValue=false;"> <DIV> 加载中…… </DIV> <DIV> 请稍等，网页正在处理中…… </DIV> <DIV> 可能需要数秒钟. </DIV> <DIV> <DIV ID="divProgressOuter"> <DIV ID="divProgressInner"></DIV> </DIV> </DIV> <DIV> <INPUT TYPE="button" ID="btnCancel" VALUE="取消"> </DIV> </DIV> <> <> <DIV ID="divModal" > </DIV> <> </body> </html>
希望本文所述对大家JavaScript程序设计有所帮助。