php 页面加载进度条,jquery实现页面加载进度条

实现原理：

根据页面执行js的顺序将遮罩层和loading图片最先显示出来，等到页面加载完成后，用js控制图片消失。使用jquery实现。

导入的jquery文件：

代码：

fortestҳ

#grey_div{

position:absolute;

background:#cccccc;

left:0px;

top:0px;

filter:Alpha(Opacity=30);

/* IE */

-moz-opacity:0.4;

/* Moz + FF */

opacity: 0.4;

}

#xs3{

background:#FFFFFF;

position:absolute;

border:1px solid #CC66CC;

display:none;

}

页面加载中...

//一开始就显示遮罩和loading图片

$.md({modal:"#xs3"});

测试页面

//页面加载完成时去除遮罩

$("#xs3").remove();

$("#grey_div").remove();

一个在线生成loading图片的网站:http://preloaders.net/

本文地址:http://www.it300.com/article-2220.html