javascript模拟实现ajax加载框实例

更新时间：2014年10月15日 14:44:19 投稿：shichen2014

这篇文章主要介绍了javascript模拟实现ajax加载框的方法,实例简述了其实现过程,方法简单实用,需要的朋友可以参考下

本文实例讲述了javascript模拟实现ajax加载框的方法，分享给大家供大家参考。具体方法如下：

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;//获取页面中的实际高度
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";//这里用实际路径替换
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";
}
}

调用方法如下：

复制代码代码如下:

loading(true,"加载中..."); loading(false)

希望本文所述对大家的web前端程序设计有所帮助。

您可能感兴趣的文章:

ES6 javascript的异步操作实例详解
这篇文章主要介绍了ES6 javascript的异步操作,结合实例形式分析了ES5中异步操作的概念、原理、使用方法及相关注意事项,需要的朋友可以参考下
2017-10-10
JavaScript实现数组去重的十种方法分享
去重是开发中经常会碰到的一个热点问题，这篇文章主要介绍了JavaScript中实现数组去重的10种方法，文中的示例代码讲解详细，感兴趣的可以了解一下
2022-11-11
使用js和canvas实现时钟效果
这篇文章主要为大家详细介绍了使用js和canvas实现时钟效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
echarts 3D地图为区域自定义颜色的解决方法
在Echarts中,我们很多时候是需要给自己想要的几个区域的地图进行颜色高亮,这篇文章主要给大家介绍了关于echarts 3D地图为区域自定义颜色的相关资料,需要的朋友可以参考下
2021-08-08
微信小程序自定义底部弹出框功能
这篇文章主要为大家详细介绍了微信小程序自定义底部弹出框功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
javascript中in运算符用法分析
这篇文章主要介绍了javascript中in运算符用法,实例分析了in运算符的相关使用技巧,非常具有实用价值,需要的朋友可以参考下
2015-04-04
JS实现随机颜色的3种方法与颜色格式的转化
随机颜色和颜色格式是我们在开发中经常要用到的一个小功能，网上相关的资料也很多，想着有必要总结一下自己的经验。所以这篇文章主要介绍了JS实现随机颜色的3种方法与颜色格式的转化,需要的朋友可以参考借鉴，下面来一起看看吧。
2017-01-01
微信小程序vant弹窗组件的实现方式
这篇文章主要介绍了小程序vant弹窗组件的实现方式，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2020-02-02
详解js获取video任意时间的画面截图
这篇文章主要介绍了js获取video任意时间的画面截图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
禁止弹窗中蒙层底部页面跟随滚动的几种方法
我们大家在做弹出层的时候，必不可少的一个元素就是蒙层，也就是遮罩层，当弹出层滚动的时候，蒙层底部的页面一般是要求固定不动的，所以这篇文章就来给大家介绍了如何禁止弹窗中蒙层底部页面跟随滚动的几种方法，需要的朋友可以参考下。
2017-12-12