这是一款很不错的网页Loading效果，常用于Ajax交互式网页设计中，点击按钮即可弹出Loading框，若Loading框未加载完成时关闭网页，会弹出确认提示框，用于一些对安全性能要求高的网页交互处理中，比如付款操作。
运行效果截图如下：
在线演示地址如下：
具体代码如下：
<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.\n\nAre 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!"> <!-- BEGIN PROGRESS DIALOG --> <DIV onselectstart="window.event.returnValue=false;"> <DIV> 加载中…… </DIV> <DIV> 请稍等，网页正在处理中…… </DIV> <DIV> 可能需要数秒钟. </DIV> <DIV> <DIV> <DIV></DIV> </DIV> </DIV> <DIV> <INPUT TYPE="button" VALUE="取消"> </DIV> </DIV> <!-- END PROGRESS DIALOG --> <!-- BEGIN FAKE MODAL DIV--> <DIV> </DIV> <!-- END FAKE MODAL DIV --> </body> </html>