JS基于Ajax实现的网页Loading效果代码_javascript技巧_脚本之家

本文实例讲述了JS基于Ajax实现的网页Loading效果代码。分享给大家供大家参考,具体如下:

希望本文所述对大家JavaScript程序设计有所帮助。

这是一款很不错的网页Loading效果,常用于Ajax交互式网页设计中,点击按钮即可弹出Loading框,若Loading框未加载完成时关闭网页,会弹出确认提示框,用于一些对安全性能要求高的网页交互处理中,比如付款操作。

很不错的网页Ajax Loading效果var NUMBER_OF_REPETITIONS = 40;var nRepetitions = 0;var g_oTimer = null;function startLongProcess(){ divProgressDialog.style.display = ""; resizeModal; window.onresize = resizeModal; window.onbeforeunload = showWarning; continueLongProcess();}function updateProgress{ divProgressInner.style.width = (parseInt(divProgressOuter.style.width) * nNewPercent / 100)+ "px";}function stopLongProcess(){ if  { window.clearTimeout; 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; 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);}  加载中……   请稍等,网页正在处理中……   可能需要数秒钟.         

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图