一个基于jquery的页面预载入效果(loading)
2016-07-22 14:32
337 查看
1，在代码<head></head>里加入以下jquery：
[javascript] view
plain copy
$(window).load(function(){
$("#loading").hide();
})
2，在里<body></body>加入以下代码：
[xhtml] view
plain copy
<div id="loading">
Loading content, please wait..
<img src="loading.gif" mce_src="loading.gif" alt="loading.." />
</div>
在里的这代码必须保证在网页载入的最前面。
接着是css代码：
[xhtml] view
plain copy
#loading{
position:absolute;
width:300px;
top:0px;
left:50%;
margin-left:-150px;
text-align:center;
padding:7px 0 0 0;
font:bold 11px Arial, Helvetica, sans-serif;
}
一个基于jquery的loading效果就完成咯。
[javascript] view
plain copy
$(window).load(function(){
$("#loading").hide();
})
2，在里<body></body>加入以下代码：
[xhtml] view
plain copy
<div id="loading">
Loading content, please wait..
<img src="loading.gif" mce_src="loading.gif" alt="loading.." />
</div>
在里的这代码必须保证在网页载入的最前面。
接着是css代码：
[xhtml] view
plain copy
#loading{
position:absolute;
width:300px;
top:0px;
left:50%;
margin-left:-150px;
text-align:center;
padding:7px 0 0 0;
font:bold 11px Arial, Helvetica, sans-serif;
}
一个基于jquery的loading效果就完成咯。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 制作Flash Loading 加载进度条
- javascript实现点击提交按钮后显示loading的方法
- jQuery简单实现提交数据出现loading进度条的方法
- jquery显示loading图片直到网页加载完成的方法
- 让jQuery Mobile不显示讨厌loading界面的方法
- Ajax loading gif generator
- Ajax风格的一款网页Loading效果
- 超炫酷的WPF实现Loading控件效果
- error while loading shared libraries xx.so处理方法
- Android中Market的Loading效果实现方法
- jQuery实现彩带延伸效果的网页加载条loading动画
- 一看就喜欢的loading动画效果Android分析实现
- javascript 通用loading动画效果实例代码
- JS基于Ajax实现的网页Loading效果代码
- Angularjs注入拦截器实现Loading效果
- 基于javascript实现页面加载loading效果
- apache提示Failed loading ZendLoader.dll解决方法
- JS仿Windows开机启动Loading进度条的方法
- 三款Android炫酷Loading动画组件推荐
- 基于javascript实现页面加载loading效果