原理：页面先显示加载的loading图片，然后你获取你要加载的页面是否都加载完毕，再用onload将loading图片隐藏掉就可以
方法有两张：
①利用jq中 $("document").ready() 与 js 中的 window.onload 事件的时间差
window.onload事件实在所有的图片加载完才触发的，ready事件是在所有dom加载完触发的，这时候图片还没有完全加载完，所以有个时间差
②用js控制加载动画显示时间
这里因为没有 具体要求，所以我用了第二种比较简便的方法
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>预缓存</title>
<style type="text/css">
</style>
</head>
<body>
<div style="height: 1000px;width: 100%;background-color: #43CD80"></div>
<script>
//获取浏览器页面可见高度和宽度
var _PageHeight = document.documentElement.clientHeight,
_PageWidth = document.documentElement.clientWidth;
//计算loading框距离顶部和左部的距离（loading框的宽度为215px，高度为61px）
var _LoadingTop = _PageHeight > 61 ? (_PageHeight - 61) / 2 : 0,
_LoadingLeft = _PageWidth > 215 ? (_PageWidth - 215) / 2 : 0;
//在页面未加载完毕之前显示的loading Html自定义内容
var _LoadingHtml =
'<div id="loadingDiv" ' +
'style="position:absolute;left:0;width:100%;top:0;background:#f3f8ff;opacity:1;filter:alpha(opacity=80);z-index:10000;' +
'height:' + _PageHeight + 'px;">' +
'<div class="loadImg" ' +
'style="position: absolute; cursor1: wait; width: auto; height: 57px; line-height: 57px;padding-left: 50px;'+
'left: ' + _LoadingLeft + 'px;' + 'top:' + _LoadingTop + 'px; padding-right: 5px; ' +
'border: none; color: #696969; ' +
'background: #fff url(../../img/loadingImg.gif) no-repeat scroll 5px 10px;">' +
'页面加载中，请等待...' +
'</div>' +
'</div>';
//css样式
//呈现loading效果
document.write(_LoadingHtml);
//监听加载状态改变
document.onreadystatechange = completeLoading;
//加载状态为complete时移除loading效果
function completeLoading() {
setTimeout(function () {
if (document.readyState == "complete") {
var loadingMask = document.getElementById('loadingDiv');
loadingMask.parentNode.removeChild(loadingMask);
}
},1000);
}
</script>
</body>
</html>
我用setTimeout控制动画显示时间为1秒，一般顶部DOM都会加载完成，这样就不会影响样式布局显示了
也就避免了客户等待时间过长等问题，提高了体验
附加：网页loading GIF动态图
网址：http://www.lanrentuku.com/gif/a/loading.html
相关推荐
在网页加载过程中，为了提供更好的用户体验，开发者经常使用JS来实现页面等待效果，即在内容完全加载之前展示一个等待动画或者提示，让用户知道页面正在努力加载。 "js加载页面等待效果"主要涉及到以下几个关键知识...
在这个场景中，所有页面都继承自BasePage，意味着它提供了一个统一的入口点来实现加载等待效果。 - 基类中的方法可以是加载等待效果的启动和结束逻辑，这确保了每个页面在加载前后都能正确执行相关的JavaScript特效...
为了解决这个问题，"页面加载等待效果"被广泛采用，它在页面内容实际加载的过程中，向用户提供一种视觉反馈，让他们知道网站正在努力处理信息，并非停滞不前。这种效果通常表现为一个旋转的加载图标，也称为菊花图或...
在本文中，我们将深入探讨如何使用JavaScript实现页面加载完毕之前的“loading”提示效果。这个效果可以在页面内容完全加载之前，向用户展示一个“页面加载中，请稍后...”的提示，以提升用户体验，避免用户在等待...
"jQuery 实现的等待加载页面"就是一种为了优化用户交互而设计的技术方案。jQuery，一个强大的JavaScript库，简化了DOM操作、事件处理和动画效果，使得创建这种功能变得更加简单。 首先，我们来看`jquery....
"js加载等待效果"是一种技术手段，用于提升用户体验，确保用户在等待内容加载时能够有所感知，避免因页面无响应而产生疑惑或不耐烦。这个效果通常通过JavaScript实现，结合CSS和HTML，为用户提供一个视觉上的反馈，...
- JavaScript文件：这是实现加载等待功能的核心代码，通常命名为`jquery.loading.js`。 - CSS文件：用于定义加载动画的样式，可能命名为`loading.css`。 - 示例HTML文件：展示了如何在页面中使用该插件，可能命名为`...
在实际应用中，网页加载等待效果可以通过JavaScript和CSS实现。JavaScript可以监测页面加载状态，比如使用`window.onload`或`document.readyState`事件来判断何时显示和隐藏加载动画。CSS则可以用于控制动画的样式和...
本案例中，我们探讨的是一个相对完善的JS实现的加载等待效果。通过提供的资源，我们可以看到包括一个HTML页面（ajax-loader.html）、一个JavaScript文件（darale.js）以及一个动态加载图标的GIF文件（ajax-loader....
在创建加载等待功能时，我们通常会利用JavaScript和CSS来实现动画效果，同时在后端JSP中处理数据和逻辑。 1. **HTML结构**：首先，我们需要创建一个基本的HTML结构，包含一个显示加载动画的元素。这可以是一个简单...
本资源提供了四款由HTML、CSS和JavaScript共同实现的精美网页加载页面动画源码，旨在帮助开发者或设计师打造更具吸引力的网站。 1. HTML基础与结构 HTML（超文本标记语言）是网页的基础，负责构建页面的结构。在这...
JavaScript加载等待效果是一种常见用户体验优化技术，用于在数据加载期间向用户展示反馈，告知他们系统正在处理请求。这种效果通常会在用户点击按钮或链接后显示，直到后台数据完全加载完毕。下面将详细介绍实现这一...
在网页加载过程中，用户可能会遇到长时间等待的情况，此时为了提供更好的用户体验，我们可以使用JavaScript来实现页面加载等待效果。这种效果通常被称为“加载指示器”或“进度条”，它可以让用户知道页面正在加载，...
"jQuery页面加载效果"是指利用JavaScript库jQuery实现的动态加载动画，它能够以吸引人的视觉方式展示网页内容正在加载的过程，使用户在等待期间不会感到乏味。这种效果在现代网页设计中被广泛应用，尤其在内容分块...
页面载入等待代码是网页开发中的一个重要环节，特别是在用户界面设计和用户体验优化方面。JavaScript作为浏览器端的主要脚本语言，提供了丰富的API和方法来处理页面的生命周期，包括控制页面的加载过程。本篇文章将...
"css3,js实现加载动画效果"这个主题正是围绕如何利用CSS3和JavaScript来创建吸引人的加载等待动画进行探讨。下面我们将深入讨论这两个技术如何协同工作，以及具体到"css3-circle-loading"这个例子中，是如何实现圆形...
在JavaScript（js）中实现遮罩加载效果是一种常见的前端开发技术，主要应用于页面内容加载时显示等待提示，提升用户体验。这种效果通常是通过结合HTML、CSS和JavaScript来完成的。下面我们将详细探讨如何实现这一...
本话题将深入探讨如何利用HTML5实现网页加载中的效果，以及如何模拟安卓Toast提示和iOS7.0的删除确认提示。 首先，让我们关注HTML5的页面加载效果。传统的HTML4中，用户通常只能看到页面内容逐个加载，而在HTML5中...
本话题将深入探讨"H5多种加载效果loading"，即H5页面在加载过程中使用的炫酷动画，旨在提升用户在等待页面完全加载时的体验。 一、什么是H5加载效果 H5加载效果，也称为“loading”或“预加载”，是指在页面内容...
"页面加载等待遮罩JS.rar"这个压缩包提供了一个纯JavaScript实现的解决方案，它可以帮助我们快速地为网页添加这种功能。 首先，"遮罩层"是一种常见的前端设计技术，它的主要作用是在页面上覆盖一层半透明或全黑的...