手机站全局的html+css加载等待效果
本文只提供思路，CSS神马的自己定制吧，JS是可以优化的，比如，输出图片的JS也可以放到showdiv()里面，我没有做优化，只是实现，别笑话我，我比较懒...
基本思路：由于Html的解析是从上到下的，所以，可以在母版页（MVC中的LayOut）页面最上面输出一个遮罩层和一张等待效果的图片，这样子，页面打开的时候，就会有一个等待效果了。代码如下：
注意：下面这些代码一定是放到页面的最前面的，放到后面可能就不太好了。
<head>
<style type="text/css">
#loading {
/*margin-top:300px;*/
position: absolute;
top: %;
left: %;
margin-left: -75px;
text-align: center;
line-height: 25px;
font-size: 12px;
font-weight: bold;
color: #F00;
z-index: ;
}
#bg {
display: none;
position: absolute;
top: %;
left: %;
width: %;
height: %;
background-color: black;
z-index: ;
-moz-opacity: 0.6;
opacity: .;
filter: alpha(opacity=);
}
</style>
<script type="text/javascript">
function showdiv() {
document.getElementById("bg").style.display = "block";
}
function hidediv() {
document.getElementById("bg").style.display = 'none';
}
document.write("<img src='/loading.gif' id='loading' /><div id='bg'></div>");
showdiv();
</script>
第二步：给所有的的点击事件加上遮罩等待效果：
$("a").click(function () {
showdiv();
$("#loading").fadeIn();
});
第三步：加载完了隐藏遮罩层和等待图片：
页面加载完成隐藏
$(function() {
$('#loading').fadeOut();
hidediv();
});
AJAX请求加上效果，请求完成隐藏
$(function () {
// 设置jQuery Ajax全局的参数
$.ajaxSetup({
beforeSend: function () {
showdiv();
$("#loading").fadeIn();
},
complete:function() {
$('#loading').fadeOut();
hidediv();
},
});
});
AJAX我没有经过测试放出来的，如果有错误，希望能及时告诉我...
在手机上，应该是去监听它的Touch事件比较好，但是我给TouchStart事件和Touched事件不管哪个添加监听之后，链接就不会跳转了，如果谁有好的解决方案，希望能告诉我！先谢过了....
本人水平有限，实现方式比较低级，欢迎吐槽，共同进步...
手机站全局的html+css加载等待效果的更多相关文章
- jquery Mobile点击显示加载等待效果
点击某个按钮或链接时,触发等待加载效果: <script> <!-- $(document).bind("mobileinit", function(){ }); ...
- js加载等待效果
demo01: 加载首页的时候,可能会很缓慢,放一张等待图片. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ...
- C#.Net网页加载等待效果漂亮并且简单
最近网页加载数据比较多,点击后给用户就是白板很不友好,想了很久找了些资料,在网页加载中显示等待画面给客户,页面加载完成自动隐藏等待效果. 在网页后台cs代码: protected void Pa ...
- css加载没效果,查看网络显示类型为 text/plain 的解决方法
当请求的css 文件的MIME 类型 为 text/plain 时,文件会当做 .txt 文件来处理,浏览器就会拒绝渲染 产生这样的问题和服务器的配置有关系 在服务器上加上下面两句就好了 搞定
- 利用PreLoader实现一个平视显示（HUD）效果（可以运用到加载等待效果），并进行简单的讲解
什么是PreLoader? PreLoader是由Volodymyr Kurbatov设计的一个很有意思的HUD(平视显示效果(Head Up Display)),通过运动污点和固定污点之间的粘黏动画 ...
- 为网格布局图片打造的超炫 CSS 加载动画
今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...
- css加载优化
<head> <script> // https://github.com/filamentgroup/loadCSS !function(e){"use stric ...
- 炫！一组单元素实现的 CSS 加载进度提示效果
之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合.这些加载效果都是基于一个 DIV 元素实现的,十分强悍. 温馨 ...
- CSS 加载新方式
Chrome 浏览器有意改变<link rel="stylesheet">的加载方式,当其出现在<body>中时,这一变化将更加明显.笔者决定在本文中进行详 ...
随机推荐
- HttpServletResponse对象（二）之常见应用
---恢复内容开始--- 1. 使用HttpServletResponse对象实现文件下载 文件下载功能是web开发中经常使用到的功能,使用HttpServletResponse对象就可以实现文件的下 ...
- Python 2.x版本和Python3.x版本的不同
在新的Python版本中,Python3.x虽然在主要的核心语言和模块等方面没有打的改变,但是Python3.x与2.x还是有很大区别的.而且Python3.x与2.x并不兼容. 比如说HTTPSer ...
- Vue引入第三方JavaScript库和如何创建自己的Vue插件
一 第三方JavaScript库 前言 .vue文件 中不解析 script标签引入js文件,只能用 import 引入 有两种用法: 1.import a from '../a' 2.import ...
- is not mapped 错误改正
我出现的错误是:oorg.hibernate.hql.ast.QuerySyntaxException: DEPT is not mapped [from DEPT] 配置文件如下: <?xml ...
- timestamp to time 时间戳转日期
function timestampToTime(timestamp) { var date = new Date(timestamp * 1000); //timestamp 为10位需*100 ...
- Linux制作deb
1.新建一个我们临时的工作目录mkdir deb 2.新建我们程序的目录mkdir hello 3.编写我们的程序 我们以我们最熟悉的helloworld程序做起,hello.c代码如下#includ ...
- shp文件导入mysql5.6.15
百度了一下 方法大致相同,就是提供的资源都缺斤短两还在细节上有差异.所以上传一份正确的. 0.将cygwin1.dll拷贝到system32目录下面1.将shp以及shp的相关文件和DOShere的d ...
- Android学习——文件存储
在Andriod开发中,文件存储和Java的文件存储类似.但需要注意的是,为了防止产生碎片垃圾,在创建文件时,要尽量使用系统给出的函数进行创建,这样当APP被卸载后,系统可以将这些文件统一删除掉.获取 ...
- 并发包交换数据Exchanger
/** * * @描述: 用于实现两个人之间的数据交换,每个人完成一定的事务后想与对方交换数据,第一个先拿出数据的人一直等待 * 直到第二个人拿到数据 到来时,才能彼此交换数据. * @作者: Wnj ...
- SQL Server ->> 高可用与灾难恢复（HADR）技术 -- AlwaysOn（实战篇）之AlwaysOn可用性组搭建
因为篇幅原因,AlwaysOn可用性组被拆成了两部分:理论部分和实战部分.而实战部分又被拆成了准备工作和AlwaysOn可用性组搭建. 三篇文章各自的链接: SQL Server ->> ...