jquery fakeLoader.js创建页面加载动画例子

HTML

我们只需要在<body>的第一行加入以下代码。
 
<div id="fakeLoader"></div>

CSS

然后在<head>里载入css样式文件。
 
<link rel="stylesheet" href="css/fakeLoader.css">

JS

别忘了加载jQuery库文件以及fakeLoader.js。
 
<script src="js/jquery.js"></script>
<script src="js/fakeLoader.min.js"></script>

然后在</body>的上一行加入以下代码:
 
<script type="text/javascript">
$("#fakeloader").fakeLoader();
</script>

以上代码就是调用了fakeLoader.js插件,该插件还提供了以下选项设置。
timeToHide:过渡加载动画时间,毫秒,默认1200。
spinner:动画效果,有7个值可选: 'spinner1', 'spinner2', 'spinner3', 'spinner4', 'spinner5', 'spinner6', 'spinner7',默认值:spinner1。
bgColor:过渡遮罩层背景色,默认:"#2ecc71"。
imagePath:自定义过渡动画图片。

时间: 2024-09-14 15:09:43

jquery fakeLoader.js创建页面加载动画例子的相关文章

jquery中如何在页面加载的时候根据action中的值的长度动态生成div

问题描述 jquery中如何在页面加载的时候根据action中的值的长度动态生成div 我action中的数据是保存在json中,然后要根据数据记录数生成多个div, //门店信息信息加载 $.ajax({ url:"findAllStoreInfoAction.action?workDate="+showCurrentTime(), dataType:"json", type:"POST", async:false, success: func

完美解决JS文件页面加载时的阻塞问题_javascript技巧

关于页面加载时的时间消费,许多书中都做出了介绍,也提出了很多种方法.本文章就详细介绍XHR注入. 概述:JS分拆的方法 1.XHR注入:就是用ajax异步请求同域包含脚本的文件,然后将返回的字符串转化为脚本使用,该方法不会造成页面渲染和onload事件的阻塞,因为是异步处理,推荐使用. 2.iframe注入:加载一个iframe框架,通过使用iframe框架中的脚本来避免src方式加载脚本的阻塞,但是iframe元素开销较大,不推荐. 3.DOM注入:就是创建script元素,通过制定该元素的s

jquery及js实现动态加载js文件的方法_javascript技巧

本文实例讲述了jquery及js实现动态加载js文件的方法.分享给大家供大家参考,具体如下: 问题: 如果用jquery append直接加载script标签的话,会报错的.除了document.write外,还有没有其他的比较好的动态加载js文件的方法. 解决方法: 1.jquery方法 $.getScript("./test.js"); //加载js文件 $.getScript("./test.js",function(){ //加载test.js,成功后,并执

js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)_javascript技巧

问题缘由:负责公司的开发平台研发工作,考虑的知识产权的保护工作,必须要考虑java的加密技术和js脚本的加密技术.在目前java加密很容易破解的情况下,还是先搞定js的加密和压缩,一方面可以提高页面加载性能,另外一方面也希望辛苦研发出来的成果得到一定的保护. 研究过程: 1.先强烈鄙视一下哪些随便转载文章的家伙,给我制造了很大的麻烦!!网上很多帖子都不靠谱.. 2.首先想了解jquery使用什么压缩的, 网上找了半天,说法不一样,后来还是在jquery官网的最频繁问题中找到了答案,但这已经是绕了

JS判断页面加载状态以及添加遮罩和缓冲动画的代码_javascript技巧

复制代码 代码如下: function initialize() { addcloud(); //为页面添加遮罩 document.onreadystatechange = subSomething; //监听加载状态改变 } function addcloud() { var bodyWidth = document.documentElement.clientWidth; var bodyHeight = Math.max(document.documentElement.clientHei

js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】_javascript技巧

本文实例讲述了js实现的页面加载完毕之前loading提示效果.分享给大家供大家参考,具体如下: 一.JS代码: //获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement.clientWidth; //计算loading框距离顶部和左部的距离(loading框的宽度为215px,高度为61px) var _LoadingTop =

jQuery生成假加载动画效果_jquery

在使用PDFObject.js时,由于后台需要转换数据,在前台显示的时候,有很长一段时间显示空白页面,所以想到写一个假的加载动画 script片段: <script type="text/javascript"> var bar = 0; var line = "||" ; var amount ="||" ; function count(){ bar= bar+2 ; amount =amount + line; $("

页面加载完后自动执行一个方法的js代码_javascript技巧

1.在body中用onload: <body onload="myfunction()"> 2.在脚本中用window.onload: <script type="text/javascript"> function myfun() { alert("this window.onload"); } /*用window.onload调用myfun()*/ window.onload=myfun;//不要括号 </scr

js的动态加载、缓存、更新以及复用(一)

使用范围: OA.MIS.ERP等信息管理类的项目,暂时不考虑网站. 遇到的问题: 完成一个项目,往往需要引用很多js文件,比如jQuery.js.easyUI等.还有自己写的一些列js文件,那么这些文件如何方便的加载,如果文件有变化如何才能让客户端及时更新缓存?如果能够提高点运行效率,那就更好了. 目标: 1.  可以方便的引用js文件. 2.  尽量使用各种缓存,避免频繁从服务器读取文件. 3.  如果js文件有更新或者增加.减少几个减少js文件,需要客户端能够自动.立刻更新. 4.  Js