function showloading(){
var loaddiv;
if(loaddiv=document.getElementById("loaddiv")){
loaddiv.style.display = "block";
}else{
loaddiv = document.createElement("DIV");
loaddiv.id="loaddiv";
loaddiv.style.position = "absolute";
loaddiv.style.zIndex = 1000;
loaddiv.style.display="";
loaddiv.style.left = 0;
loaddiv.style.top = 0;
loaddiv.style.border = "1px solid gray"
loaddiv.style.background = "#ffffff"
loaddiv.style.padding = "5";
}
var scrollTop=0;
if(top.document.documentElement && top.document.documentElement.scrollTop){
scrollTop = top.document.documentElement.scrollTop;
}else if(document.body){
scrollTop = top.document.body.scrollTop;
}
var scrollWid = document.body.scrollWidth/2-50;
loaddiv.style.left = scrollWid+"px";
loaddiv.style.top = (scrollTop + 5)+"px" ;
loaddiv.innerHTML = "<img src='/images/loading.gif'><h>数据正在获取,请稍等。。。</h>";
document.body.style.cursor="wait";
var sWidth,sHeight;
sWidth=document.body.scrollWidth;//浏览器工作区域内页面宽度 或使用 screen.width//屏幕的宽度
sHeight=document.body.scrollHeight;//屏幕高度(垂直分辨率)
//背景层(大小与窗口有效区域相同,即当弹出对话框时,背景显示为放射状透明灰色)
var bgObj=document.createElement("div");//创建一个div对象(背景层) //动态创建元素,这里创建的是 div
//定义div属性,即相当于(相当于,但确不是,必须对对象属性进行定义
//<div id="bgDiv" style="position:absolute; top:0; background-color:#777; filter:progid:DXImagesTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75); opacity:0.6; left:0; width:918px; height:768px; z-index:10000;"></div>
bgObj.setAttribute('id','bgDiv');
bgObj.style.position="absolute";
bgObj.style.top="0";
bgObj.style.background="#ffffff";
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
bgObj.style.opacity="0.6";
bgObj.style.left="0";
bgObj.style.width=sWidth + "px";
bgObj.style.height=sHeight + "px";
bgObj.style.zIndex = "10000";
document.body.appendChild(bgObj);//在body内添加该div对象
document.body.appendChild(loaddiv);
}
分享到:
相关推荐
综上所述,实现"js加载页面等待效果"需要结合JavaScript的事件监听、DOM操作、CSS动画、异步加载策略等多个方面知识,同时注重性能优化和用户体验设计,以确保用户在等待页面完全加载的过程中获得积极的视觉反馈。...
在"js等待提示"中,JavaScript扮演了关键角色,它可以监听页面上的特定事件,如表单提交,当这些事件触发时,显示等待提示,待处理完成后隐藏提示。 首先,我们需要创建一个可视化的等待提示元素,这通常是一个包含...
在网页加载过程中,用户可能会遇到长时间等待的情况,此时为了提供更好的用户体验,我们可以使用JavaScript来实现页面加载等待效果。这种效果通常被称为“加载指示器”或“进度条”,它可以让用户知道页面正在加载,...
本资源“javascript经典特效---打开页面的等待(一).rar”着重介绍了如何利用JavaScript来实现一种常见的用户体验优化——页面加载时的等待效果。 在用户打开一个网页时,如果页面内容加载时间较长,可能会让用户...
在JavaScript开发中,"加载等待效果"是一种常见的用户体验优化手段,它通常用于在处理大量数据或执行异步操作时向用户展示进度,以减少用户的等待焦虑。本案例中,我们探讨的是一个相对完善的JS实现的加载等待效果。...
JavaScript加载等待效果是一种常见的用户体验优化技术,特别是在网页内容动态加载或者需要进行大量计算时。它通过展示一个加载动画或进度条来告知用户页面正在处理数据,以减少用户的等待焦虑感,提升整体的交互体验...
《使用spin.js创建JavaScript等待效果》 在网页开发中,用户交互时的加载等待效果是提升用户体验的关键元素之一。spin.js是一个轻量级且功能强大的JavaScript库,专门用于生成各种类型的加载指示器,即我们常说的...
"js加载等待效果"是一种技术手段,用于提升用户体验,确保用户在等待内容加载时能够有所感知,避免因页面无响应而产生疑惑或不耐烦。这个效果通常通过JavaScript实现,结合CSS和HTML,为用户提供一个视觉上的反馈,...
在网页开发中,为了提升用户体验,常常需要在用户进行某些操作(如点击链接、提交表单)时显示等待效果,让用户知道系统正在处理请求。本文将深入探讨如何使用JavaScript来实现这样的页面等待特效,主要关注进度条和...
2. **JavaScript交互**:在ASP.NET中,可以使用JavaScript或jQuery来控制等待效果的显示与隐藏。当用户触发一个长耗时操作时,显示等待效果;操作完成后,隐藏等待效果。例如,可以监听按钮的`click`事件,然后使用`...
JavaScript加载等待效果是一种常见用户体验优化技术,用于在数据加载期间向用户展示反馈,告知他们系统正在处理请求。这种效果通常会在用户点击按钮或链接后显示,直到后台数据完全加载完毕。下面将详细介绍实现这一...
本项目"动态转圈等待效果.zip"包含了一个实现这种效果的HTML、CSS和JavaScript小实例。 1. HTML 结构基础: HTML部分通常会包含一个占位符元素,用于显示等待动画。例如,可以创建一个`<div>`元素,给它一个特定的...
接下来,我们编写JavaScript代码(`jsWaitDialog.js`)来控制等待框的显示和关闭: ```javascript document.getElementById('start-loading').addEventListener('click', function() { showWaitDialog(); // ...
在用户进行操作时,如数据加载、文件上传等耗时过程,一个清晰、美观的进度条或动态等待效果能够大大提高用户的满意度,减轻他们的焦虑感。本文将详细介绍如何实现标题所提及的"进度条代码+页面+各种动态等待效果...
9. **透明层(遮罩层)**:通过CSS的`opacity`和`z-index`属性,可以创建半透明的覆盖层,用于展示警告信息或加载等待效果。 10. **JSP转HTML或其他格式**:通过客户端或服务器端脚本,将JSP页面转换为HTML或其他...
2. **JavaScript动画库**:像jQuery、React、Vue等库提供了丰富的动画API,可以轻松实现等待效果。例如,jQuery的`.animate()`方法可以创建自定义动画,而React则可以通过`useState`和`useEffect`配合实现组件的动画...
根据给定的信息,“JavaScript经典效果集锦”这篇文章主要介绍了多种使用JavaScript实现的网页特效与功能。下面将对文章中提及的一些经典效果进行详细介绍。 ### 1. 实现小技巧 文章开头提到了几个简单的...
下面我们将深入探讨如何使用JavaScript实现等待效果,并结合提供的文件名来分析可能的实现方式。 1. **基本原理**: - 等待特效的核心是通过CSS和JavaScript协同工作来创建动画。CSS用于定义动画样式,如旋转图标...
本文将深入探讨如何使用CSS实现页面置灰等待效果,并结合一个简单的`load.gif`动画示例,为您的网站增添专业感。 首先,我们需要了解CSS中的`pointer-events`属性。这个属性可以控制元素是否响应鼠标事件。当设置为...