JavaScript simulation to implement ajax loading box example_javascript skills

The example in this article describes the method of javascript simulation to implement the ajax loading box, and shares it with everyone for your reference. The specific method is as follows:

Copy code The code is as follows:

function loading(p_value,str)
{
if (p_value)
{
if (!document.getElementById("load_area"))
{
var para1 = document.createElement("span");
var node=document.createTextNode(str);
para1.appendChild(node);
var para=document.createElement("div");
para.id="load_area";
var top=document.body.scrollTop document.documentElement.scrollTop;//Get the actual height in the page
top_position = top 157 "px";
para.style.top =top_position;
icon.style.cssText = ";vertical-align:middle;padding-right:4px;margin-top:-2px;"
para.style.cssText =
";position:absolute;left:50%;width:140px;margin-left:-70px;height:50px;line-height:50px;font-size:18px;text-overflow:ellipsis;overflow:hidden; white- space:nowrap;text-align:center;background-color: #000;border-radius:2px;-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.5);color:#eee;" ;

var icon = new Image();
icon.src="images/loading1.gif";//Replace
with the actual path here document.body.appendChild(para);

para.appendChild(icon);

para.appendChild(para1);

}
else
{
document.getElementById("load_area").style.display="block";
}
}
else
{
document.getElementById("load_area").style.display="none";
}
}

The calling method is as follows:

Copy code The code is as follows:

loading(true,"Loading..." ); loading(false)

I hope this article will be helpful to everyone’s web front-end programming design.