本文只提供思路，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. Linux终端和win32控制台文本颜色输出

    在使用putty.secureCRT.XShell等终端仿真器连接linux系统时,ls.vim等工具的输出都含有各种颜色,这些颜色的输出大大地增强了文本的可读性. 通常我们可以使用echo命令加-e ...

  2. 使用QQ第三方登录 并在父页面跳转刷新

    <html> <head> <title>QQ登录跳转</title> <script src="http://lib.sinaapp. ...

  3. 2-3 Sass的函数功能-列表函数

    列表函数主要包括一些对列表参数的函数使用,主要包括以下几种: length($list):返回一个列表的长度值: nth($list, $n):返回一个列表中指定的某个标签值 join($list1, ...

  4. Python基础-进程和线程

    一.进程和线程的概念 首先,引出“多任务”的概念:多任务处理是指用户可以在同一时间内运行多个应用程序,每个应用程序被称作一个任务.Linux.windows就是支持多任务的操作系统,比起单任务系统它的 ...

  5. Office - InfoPath

    1. 移除隐藏空间后剩余的空白: http://social.technet.microsoft.com/Forums/sharepoint/zh-TW/3dea3014-f808-428b-b283 ...

  6. 用虚拟信用卡注册Google Play开发者账号

    本文首发于http://www.abcdsxg.cn/free/net/562 虚拟信用卡 首先介绍一下虚拟信用卡(Virtual Credit Card),顾名思义,虚拟就是没有实体卡,一般都是在提 ...

  7. restful知识点之一CBV

    urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^FBVTEST/', views.FBV_Test.as_view()), ] url ...

  8. 浅谈 @RequestParam 和@PathVariable

    版权声明:本文为博主原创文章,如果对你有用,敬请带走! https://blog.csdn.net/chuck_kui/article/details/55506723 首先 上两个地址: 地址①ht ...

  9. centos 开机执行的命令

    centos开机执行的命令-------待验证,因为有可能涉及到root问题,没想明白怎么输入密码 1.增加rc.local可执行权限 chmod +x /etc/rc.d/rc.local 2.在里 ...

  10. 在Visualsvn Server上创建svn账号和密码

    VisualSVN Server是一个集成的svn服务端工具,是一款svn服务端不可多得的好工具.可以先安装好VisualSVN Server后,运行VisualSVN Server Manger,然 ...