java 实现loading效果_JS基于Ajax实现的网页Loading效果代码

摘要：这篇JavaScript栏目下的“JS基于Ajax实现的网页Loading效果代码”，介绍的技术点是“loading效果、loading、ajax、js、实现、代码”，希望对大家开发技术学习和问题解决有帮助。

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

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

运行效果截图如下：

在线演示地址如下：

具体代码如下：

很不错的网页Ajax Loading效果

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);

}

onselectstart="window.event.returnValue=false;">

加载中……

请稍等，网页正在处理中……

可能需要数秒钟.

ID="btnCancel" οnclick="stopLongProcess();" VALUE="取消">

STYLE="BACKGROUND-COLOR: white; FILTER: alpha(opacity=75); LEFT: 0px; POSITION:

absolute; TOP: 0px; Z-INDEX: 3"

οnclick="window.event.cancelBubble=true; window.event.returnValue=false;">

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