当一个页面数据量太大时，可能需要加载较长时间，这期间看到的将是白屏，很不好吧。
可以使用下面内容在页面加载时展示一些其他的东西，让人知道页面还在加载，而不是页面死了。或没有数据。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
.loadpagediv {
display:none;
position:absolute;
top:30%;
left:40%;
width:25%;
height:10%;
background-color:green;
border:10px solid blue;
color:red;
}
</style>
<script>
var id = setTimeout('loadPage()',100);
function loadPage() {
// 取得文档载入状态，如果载入完成，则readystate='complete'
// 根据这个可以定时去获取文档载入状态，来实现页面载入等待效果
var readystate = document.readyState.toLowerCase();
if (readystate == 'complete')
{
clearTimeout(id);
document.getElementById('loadpagediv').style.display = "none";
}
else {
document.getElementById('loadpagediv').style.display = "block";
id = setTimeout('loadPage()',100);
}
}
</script>
</head>
<body>
<div id="loadpagediv" class="loadpagediv">
正在加载页面。。。
</div>
</body>
<iframe src="http://www.google.com" style="position:absolute;top:200px;left:200px;width:400px;height:200px;"></iframe>
</html>
分享到：
相关推荐
在网页加载过程中，为了提供更好的用户体验，开发者经常使用JS来实现页面等待效果，即在内容完全加载之前展示一个等待动画或者提示，让用户知道页面正在努力加载。 "js加载页面等待效果"主要涉及到以下几个关键知识...
页面等待效果的实现方式多种多样，可以从简单的HTML/CSS实现到更复杂的JavaScript动画。以下是一些关键的技术点： 1. **CSS动画**：使用CSS3的`@keyframes`规则可以创建动画效果。通过定义动画的开始和结束状态，...
实现JavaScript打开页面等待效果的方法多种多样，下面将详细介绍几种常见的技术手段： 1. **CSS3动画**：利用CSS3的`@keyframes`规则可以创建自定义动画，结合`animation`属性应用到元素上，可以实现简单的旋转、...
"jQuery 实现的等待加载页面"就是一种为了优化用户交互而设计的技术方案。jQuery，一个强大的JavaScript库，简化了DOM操作、事件处理和动画效果，使得创建这种功能变得更加简单。 首先，我们来看`jquery....
例如，在需要加载等待效果的地方，添加以下jQuery代码： ```javascript $(document).ajaxStart(function() { $('#loading').show(); }).ajaxComplete(function() { $('#loading').hide(); }); ``` 这段代码会在...
页面等待效果，通常被称为加载指示器，是一种用户体验设计的重要元素，特别是在网页或应用程序加载内容时。这种效果可以向用户展示页面正在处理数据或加载资源，从而避免用户因等待时间过长而感到不耐烦或疑惑。在本...
在网页开发中，"js等待提示"是一种用户体验优化技术，主要目的是在页面处理大量数据或者进行异步操作时，向用户展示一个加载或等待的提示，以告知用户系统正在运行中，避免用户误认为页面卡死。这个过程通常涉及到...
在IT行业中，加载页面等待提示程序是一个常见的用户体验优化技术，主要目的是在网页或应用程序加载过程中向用户显示一个视觉指示器，以告知用户系统正在进行后台处理并请求他们耐心等待。这样的提示通常包括旋转的...
本项目提供了一套完整的Ajax页面载入等待特效解决方案，包括演示、调用方法以及实际效果展示。 首先，我们来理解Ajax的工作原理。当用户触发一个Ajax请求时，JavaScript代码会创建一个新的XMLHttpRequest对象，通过...
- 基类中的方法可以是加载等待效果的启动和结束逻辑，这确保了每个页面在加载前后都能正确执行相关的JavaScript特效。 2. **JS特效**： - JS特效通常指的是使用JavaScript实现的视觉效果，如动画、过渡、变形等。...
"WPF加载等待效果"是指在程序进行后台处理时，为用户展示一个可视化的等待界面，以告知用户系统正在忙碌并请求他们耐心等待。这种效果能够提升应用的专业感，并减少用户因未知等待而产生的焦虑感。 实现WPF加载等待...
"jQuery页面加载效果"是指利用JavaScript库jQuery实现的动态加载动画，它能够以吸引人的视觉方式展示网页内容正在加载的过程，使用户在等待期间不会感到乏味。这种效果在现代网页设计中被广泛应用，尤其在内容分块...
在这个项目中，我们将探讨如何使用AJAX、Struts2框架和MySQL数据库来实现一个页面等待效果。 首先，我们要理解页面等待效果。当用户触发一个可能需要长时间处理的操作时，如数据查询或提交表单，显示一个加载指示器...
总的来说，"web页面加载等待页面"是网页设计中提升用户体验的一种策略，通过JavaScript和CSS的结合，可以创建出各种吸引人的加载效果，使得用户在等待过程中不会感到无聊或沮丧。同时，理解并掌握如何创建和优化这样...
在创建加载等待功能时，我们通常会利用JavaScript和CSS来实现动画效果，同时在后端JSP中处理数据和逻辑。 1. **HTML结构**：首先，我们需要创建一个基本的HTML结构，包含一个显示加载动画的元素。这可以是一个简单...
"30种页面加载效果.zip"这个压缩包文件包含了30个不同的页面加载（loading）动画示例，旨在提升用户在等待页面完全加载时的视觉体验。这些加载效果可以是简单的旋转图标，也可以是复杂的动态场景，目的都是为了使...
本话题将深入探讨"H5多种加载效果loading"，即H5页面在加载过程中使用的炫酷动画，旨在提升用户在等待页面完全加载时的体验。 一、什么是H5加载效果 H5加载效果，也称为“loading”或“预加载”，是指在页面内容...
在网页设计中，用户体验是至关重要的一个环节，而页面载入缓冲效果就是提升用户体验的一种巧妙方式。当用户点击链接或提交表单时，他们通常希望看到的不是枯燥无味的空白页面，而是有一个动态的、视觉上吸引人的加载...
"页面载入等待"这个主题涉及到如何优雅地处理用户在等待页面完全加载时的体验。在这个场景中，我们通常会利用JavaScript（JS）来实现一些动态效果，以提高用户体验，特别是针对文字特效的应用。"JS特效-文字特效...
当用户访问一个网站时，如果页面内容较多或者需要处理的数据复杂，加载过程可能会较慢，这时展示一个等待效果可以给用户一个预期，减少他们对加载时间的不耐烦感。这个效果通常通过JavaScript来实现，因为它具有强大...