效果:

加载动画是由jquery和fakeloader这个js库实现的。

其实这个也可以做成一个插件,用数据库记录是否开启,选择动画的样式,那样扩展性会更好.

源码资源已经上传在我的csdn下载中。
http://download.csdn.net/detail/u012995856/9602642

这个独立性很好,除了引入css文件和js文件,其余的操作就是在页面加一个div层一步就OK了.

1.把资源文件放入Corethink库目录中
在Public/libs目录下新建fakeloader/js、fakeloader/css目录,把资源文件拷贝到对应的目录

2.在Home/View/Public/layout.html中引入fakeloader的js和css

<link rel="stylesheet" href="__PUBLIC__/libs/fakeloader/css/fakeloader.css">
<script src="__PUBLIC__/libs/fakeloader/js/fakeloader.min.js"></script>
<script>
$(document).ready(function(){
$(".fakeloader").fakeLoader({
timeToHide:1200,
bgColor:"#3498db",
spinner:"spinner3"
});
});
</script>

  

此处的layout之前已经引入了jquery库
注意js代码会依赖jquery,一定要出现在jquery的下面

3.增加显示加载动画的div
我是加在了

</body>

  的前边了

<div class="fakeloader"></div>

  这样就OK了.

CoreThink开发(十三)增加页面加载动画的更多相关文章

  1. cocos2d-x游戏开发(十五)游戏加载动画loading界面

    个人原创,欢迎转载:http://blog.csdn.net/dawn_moon/article/details/11478885 这个资源加载的loading界面demo是在玩客网做逆转三国的时候随 ...

  2. 基于css3炫酷页面加载动画特效代码

    基于CSS3实现35个动画SVG图标.这是一款基于jQuery+CSS3实现的SVG图标动画代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&qu ...

  3. HTML 页面加载动画效果

    浏览器:Chrome, IE <!doctype html> <html> <head> <title>CSS transform: CSS only ...

  4. css页面加载动画

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  5. webAPP制作框架Ionic--构建APP侧边栏 底部选项卡 轮播图 加载动画

    超好用的移动框架--Ionic Ionic是一个轻量的手机UI库,具有速度快,界面现代化.美观等特点. 为了解决其他一些UI库在手机上运行缓慢的问题,它直接放弃了IOS6和Android4.1以下的版 ...

  6. 前端开发,页面加载速度性能优化,如何提高web页面加载速度

    一个网页访问速度的快慢,  不仅看它服务器的配置,这里除去你空间主机配置很烂的情况以外,我们从网站开发方面来探讨,前端技术需要从哪些方面提高访问的速度,需要用到哪些技术手段. 文件的加载 图标的加载: ...

  7. iOS 应用中有页面加载gif动画,从后台进入前台时就消失了

    解决办法: 在Appdelegate.m 里面有一个从后台进入前台所响应的方法,可以在该方法里post 一个通知,在加载动画里的页面接受通知,响应一定的方法即可 #pragma -mark 当程序进入 ...

  8. iOS开发——图形编程Swift篇&CAShapeLayer实现圆形图片加载动画

    CAShapeLayer实现圆形图片加载动画 几个星期之前,Michael Villar在Motion试验中创建一个非常有趣的加载动画. 下面的GIF图片展示这个加载动画,它将一个圆形进度指示器和圆形 ...

  9. 利用css实现页面加载时旋转动画

    有时浏览一些网站时在刚加载页面时候会出现一个滚动动画如下图,特别是对于一些移动端的站点或者混合应用来说应该用户体验会好很多,扒了下页面发现是用css样式控制的,于是把页面以及css样式赋值了下来, h ...

随机推荐

  1. Docker 和一个正常的虚拟机有何区别?

    问: 我多次重读Docker.io文档,希望搞明白Docker.io和一个完全的虚拟机的区别.Docker是如何做到提供一个完整的文件系统,独立的网络环境等等这些功能,同时还没有如此庞大? 为什么部署 ...

  2. 关于JSP生命周期的叙述,下列哪些为真?

    关于JSP生命周期的叙述,下列哪些为真? A.JSP会先解释成Servlet源文件,然后编译成Servlet类文件 B.每当用户端运行JSP时,jspInit()方法都会运行一次 C.每当用户端运行J ...

  3. ACM/ICPC Moscow Prefinal 2019 趣题记录

    ### Day1: ### **Problem C:** 设$k_i​$为$[A, B]​$中二进制第$i​$位是1的数的个数. 给出$k_0 \cdots k_{63}​$, 求出$[A, B]​$ ...

  4. js禁止别人查看源码

    1.直接按F12 2.Ctrl+Shift+I查看 3.鼠标点击右键查看 4.Ctrl+u=view-source:+url 把以上三种状态都屏蔽掉就可以了,document有onkeydown(键盘 ...

  5. 对Linux命令进一步学习vim(二)

    今天,进一步学习Linux相关的命令,可能会有重复的地方,但学习本来就是不断重复的过程.故作小记! 1.安装了:vim  ,,,一款Linux爱好者经常用到的ide sudo apt-get inst ...

  6. js事件循环机制(Event Loop)

    javascript从诞生之日起就是一门  单线程的  非阻塞的  脚本语言,单线程意味着,javascript代码在执行的任何时候,都只有一个主线程来处理所有的任务,非阻塞靠的就是 event lo ...

  7. [Linux 学习] Centos 图形和命令行界面切换

    要想切换图形界面和命令行界面切换, 需修改一个文件... root 下, 到 /etc/inittab 修改 id:5:initdefault Linux系统有7个运行级别(runlevel): 运行 ...

  8. BZOJ 3362 Navigation Nightmare 带权并查集

    题目大意:给定一些点之间的位置关系,求两个点之间的曼哈顿距离 此题土豪题.只是POJ也有一道相同的题,能够刷一下 别被题目坑到了,这题不强制在线.把询问离线处理就可以 然后就是带权并查集的问题了.. ...

  9. linux串口编程参数配置详解

    1.linux串口编程需要的头文件 #include <stdio.h>         //标准输入输出定义 #include <stdlib.h>        //标准函 ...

  10. Android无线测试之—UiAutomator UiObject API介绍七

    判断对象是否存在 1.判断对象是否存在相关API 返回值 API 描述 boolean waitForExists(long timeout) 等待对象出现 boolean waitUntilGone ...