在Java Web应用中, 当加载一个动态页面时及JSP页面时,如果页面动态数据较多,会有很长一段时间的空白页面,古加上这个页面正在加载的提示,使得应用更加人性化。
Java代码
processbar.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>process bar</title>
<script type="text/javascript" language="JavaScript">
//: 判断网页是否加载完成
document.onreadystatechange = function () {
if(document.readyState=="complete") {
document.getElementById('divprogressbar').style.display='none';
}
}
</script>
</head>
<body>
<div id="divprogressbar"
style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background-color: #ffffff; filter: alpha ( opacity = 100 ); z-index: 50000">
<div style="text-align: center; padding-top: 200px">
<table align="center" border="1" width="37%" cellspacing="0"
cellpadding="4" style="border-collapse: collapse" bgcolor="#FFFFEC"
height="87">
<tr>
<td bgcolor="#3399FF" style="font-size: 12px;" height="24"
align="center">
友情提示, 数据正在载入中...
</td>
</tr>
<tr>
<td style="font-size: 12px; line-height: 200%" align="center">
网页正在载入数据中.请耐心等待...
<marquee style="border: 1px solid #000000" direction="right"
width="300" scrollamount="5" scrolldelay="10" bgcolor="#ECF2FF">
<table cellspacing="1" cellpadding="0">
<tr height=8>
<td bgcolor=#3399FF width=8></td>
<td></td>
<td bgcolor=#3399FF width=8></td>
<td></td>
<td bgcolor=#3399FF width=8></td>
<td></td>
<td bgcolor=#3399FF width=8></td>
<td></td>
</tr>
</table>
</marquee>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
然后在另外需要使用的页面中加入如下代码即可:
<jsp:include page="processbar.jsp"></jsp:include>
注意哦, 只有当页面加载真的需要花费时间的时候才会看到效果。
分享到:
相关推荐
在Web应用中,实现页面加载提示是提升用户体验的重要一环。它可以帮助用户了解页面加载进度,减少用户在等待过程中的不耐烦感。本话题主要围绕如何在HTML页面中创建一个加载提示,以及如何通过JavaScript控制其显示...
在网页设计和开发中,用户体验是...总的来说,`loading.jsp`是利用JSP、HTML、CSS和JavaScript技术实现的一种页面加载提示机制,它提升了用户在等待页面加载过程中的体验,同时也展现了Web开发中对用户体验的细致考虑。
2. **前端开发**:在网页开发中,加载提示通常由JavaScript实现,可能结合HTML和CSS来展示。例如,可以使用jQuery等库创建动态效果,或者使用Web Workers进行后台处理以减轻主线程负担。 3. **异步加载**:现代网页...
开发者可以利用小程序的生命周期函数来控制加载状态,使用wx.request进行网络请求,wx.showLoading和wx.hideLoading显示和隐藏加载提示,以及wx.getImageInfo处理图片加载。 文件名列表中的“demo24.html”到“demo...
2. **Web页面加载过程**: 当用户访问一个网页时,浏览器首先解析HTML文档,然后根据文档中的引用加载CSS和JavaScript文件。如果内容是动态加载的,比如通过Ajax请求获取,那么“正在加载”提示就显得尤为重要。 3...
通过上述代码示例可以看出,在ASP.NET中实现页面加载条相对简单且直观。开发者只需关注HTML结构的构建、JavaScript逻辑的编写以及服务器端响应的管理即可。这种方式不仅能提升用户体验,还能为网站增加更多的人性化...
在Web开发中,动态加载图(也称为加载动画或进度指示器)是用户界面不可或缺的一部分。它们在网页内容正在加载时提供视觉反馈,使用户知道应用程序正在运行,并且没有卡死或崩溃。"85个Web用动态加载图"这个资源集合...
总结来说,结合CSS和jQuery实现的预加载界面不仅能够提升用户对网页加载过程的认知,还能在等待期间提供一种积极的用户体验。通过巧妙地设计和编程,我们可以创建出既美观又实用的加载界面,让网页加载变得不再...
在网页开发中,Ajax(Asynchronous JavaScript and XML)是一种创建动态网页的技术,它允许在不刷新整个页面的情况下,从服务器获取数据并局部更新页面。"Ajax加载提示"是指在使用Ajax进行后台数据交互时,为了提升...
"仿MSN页面弹出提示,popupWin控件ajax无刷新定时显示,页面加载时不显示"这个主题涉及到多个关键技术点,包括模拟即时通讯软件(如MSN)的用户体验,popupWin控件的运用,以及结合Ajax实现的无刷新数据更新。...
至于文件名为“web加载提示”的文件,可能是示例代码、HTML模板或是JavaScript代码片段,用于演示如何在Web环境中实现加载提示。具体实现方式取决于文件内容,但常见做法包括使用HTML5的`<progress>`元素、CSS3动画...
在ASP.NET Web应用程序中,AJAX(异步JavaScript和XML)技术被广泛使用来实现页面的部分刷新,提高用户体验。UpdatePanel是ASP.NET AJAX Control Toolkit的一个关键组件,它允许开发者创建无刷新更新,即用户交互后...
本文将详细探讨"jQuery Alert提示框"、"动态加载提示框"以及"jQuery插件"的相关知识点。 一、jQuery Alert提示框 在网页开发中,我们常常需要向用户显示一些信息或确认操作,传统的JavaScript alert函数虽然简单,...
在加载数据的时候提示数据正在加载中,同时还需要引入一个图片,详细资料http://blog.csdn.net/jiudihanbing/article/details/7544127
本实例以"C#.NET Web页面嵌入Excel控件,网页中在线编辑EXCEL表格"为主题,详细讲解这一技术的实现方法和关键知识点。 首先,我们要理解的是,为了在Web页面上显示和编辑Excel,我们需要一个能够处理Excel文件的...
开发者可以通过查看和学习这个示例,了解具体的实现步骤和技术细节,以便在自己的项目中实现类似的加载框动画功能。 总的来说,通过自定义加载框动画,我们可以显著提升用户在等待数据加载过程中的体验,使应用看...
在传统的网页加载中,所有图片都会在页面初次加载时一并下载,这可能导致页面加载时间过长,特别是在用户可能只关注页面顶部内容的情况下。图片延迟加载技术则改变了这一模式,它只加载用户当前可视区域内的图片,当...
这个压缩包文件"Web中定制页面提示信息(tooltips)"提供了一个纯JavaScript实现的tooltip效果,特别地,它利用了jQuery库来增强交互性和易用性。下面将详细介绍如何使用jQuery实现自定义的tooltip功能,并探讨其...
在探讨“网页加载中javascript”这一主题时,我们聚焦于如何利用JavaScript来增强网页加载过程中的用户体验,尤其是在页面加载期间显示动态的加载指示器。这种技术不仅能够提升网站的专业感,还能有效缓解用户等待时...
在本文中,我们将深入探讨如何使用单个 HTML 元素,通常是 `...这些效果在现代 web 开发中广泛应用,提高了用户对加载过程的理解和耐心。通过不断地创新和优化,我们可以创造出更多引人入胜的加载动画,提升用户体验。