本文只提供思路,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加载等待效果的更多相关文章

  1. jquery Mobile点击显示加载等待效果

    点击某个按钮或链接时,触发等待加载效果: <script> <!-- $(document).bind("mobileinit", function(){ }); ...

  2. js加载等待效果

    demo01: 加载首页的时候,可能会很缓慢,放一张等待图片. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ...

  3. C#.Net网页加载等待效果漂亮并且简单

    最近网页加载数据比较多,点击后给用户就是白板很不友好,想了很久找了些资料,在网页加载中显示等待画面给客户,页面加载完成自动隐藏等待效果. 在网页后台cs代码:    protected void Pa ...

  4. css加载没效果,查看网络显示类型为 text/plain 的解决方法

    当请求的css 文件的MIME 类型 为 text/plain 时,文件会当做 .txt 文件来处理,浏览器就会拒绝渲染 产生这样的问题和服务器的配置有关系 在服务器上加上下面两句就好了 搞定

  5. 利用PreLoader实现一个平视显示(HUD)效果(可以运用到加载等待效果),并进行简单的讲解

    什么是PreLoader? PreLoader是由Volodymyr Kurbatov设计的一个很有意思的HUD(平视显示效果(Head Up Display)),通过运动污点和固定污点之间的粘黏动画 ...

  6. 为网格布局图片打造的超炫 CSS 加载动画

    今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...

  7. css加载优化

    <head> <script> // https://github.com/filamentgroup/loadCSS !function(e){"use stric ...

  8. 炫!一组单元素实现的 CSS 加载进度提示效果

    之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合.这些加载效果都是基于一个 DIV 元素实现的,十分强悍. 温馨 ...

  9. CSS 加载新方式

    Chrome 浏览器有意改变<link rel="stylesheet">的加载方式,当其出现在<body>中时,这一变化将更加明显.笔者决定在本文中进行详 ...

随机推荐

  1. Java温故而知新(5)设计模式详解(23种)

    一.设计模式的理解 刚开始“不懂”为什么要把很简单的东西搞得那么复杂.后来随着软件开发经验的增加才开始明白我所看到的“复杂”恰恰就是设计模式的精髓所在,我所理解的“简单”就是一把钥匙开一把锁的模式,目 ...

  2. golang 应用的部署相关技术

    nohup命令 在 linux 下面部署,我们可以利用 nohup 命令,把应用部署在后端,如下所示: nohup ./yourapp & 这样你的应用就跑在了 Linux 系统的守护进程 n ...

  3. 在linux命令行利用SecureCRT上传下载文件

    一般来说,linux服务器大多是通过ssh客户端来进行远程的登陆和管理的,使用ssh登陆linux主机以后,如何能够快速的和本地机器进行文件的交互呢,也就是上传和下载文件到服务器和本地?与ssh有关的 ...

  4. 紫书第5章 C++STL

    例题 例题5-1 大理石在哪儿(Where is the Marble?,Uva 10474) 主要是熟悉一下sort和lower_bound的用法 关于lower_bound: http://blo ...

  5. struts2 执行流程及工作原理

    在Struts2框架中的处理大概分为以下的步骤  1 用户发送请求: 2 这个请求经过一系列的过滤器(Filter)(这些过滤器中有一个叫做ActionContextCleanUp的可选过滤器,这个过 ...

  6. MySQL聚合函数在计算时,不会自动匹配与之相对应的数据

    学习mysql过程中遇到了一个困惑,纠结了我半天时间,刚刚又重新复习了一下,终于知道问题所在 以下是一个需求: 取得平均薪水最高的部门的部门编号 代码如下: select deptno, avg(sa ...

  7. Java jsp 自定义标签

    1 自定义标签 1.1 引入 需求: 向浏览器输出当前客户的IP地址 (只能使用jsp标签) 1.2 第一个自定义标签开发步骤 1)编写一个普通的java类,继承SimpleTagSupport类,叫 ...

  8. 自学git心得-1

    Github作为目前世界上最先进的分布式版本控制系统,是软工工作者管理工程代码的不二选择,笔者也是因时所需,自学了基本的git操作,在此回顾一下也作为分享. 推荐学习资源:https://www.li ...

  9. mybatis ${}使用注意事项

    ${key}有值, ${key,jdbcType=VARCHAR}没有值 总结:${}使用时不要指定jdbcType等属性,指定这些反而取不到值,这也是跟#{}的一个区别.以上只是开发中遇到的情况,具 ...

  10. SQL点点滴滴_常用函数

    该文章转载自http://www.cnblogs.com/jiajiayuan/archive/2011/06/16/2082488.html 别人的总结,很详细. 以下所有例子均Studnet表为例 ...