提高用户体验的插件fakeLoader页面加载前loading演示8种效果

 在线预览

下载地址

示例代码

<div id="main">
<div class="demo">
<a href="/api/jq/5733e326a88fd/index.html" class="cur">Spinner1
</a>
<a href="/api/jq/5733e326a88fd/demo2.html">Spinner2
</a>
<a href="/api/jq/5733e326a88fd/demo3.html">Spinner3
</a>
<a href="/api/jq/5733e326a88fd/demo4.html">Spinner4
</a>
<a href="/api/jq/5733e326a88fd/demo5.html">Spinner5
</a>
<a href="/api/jq/5733e326a88fd/demo6.html">Spinner6
</a>
<a href="/api/jq/5733e326a88fd/demo7.html">Spinner7
</a>
<a href="/api/jq/5733e326a88fd/demo8.html">自定义图片
</a>
<div class="result">DEMO1 页面内容已加载完毕。
</div>
</div>
</div>
<script type="text/javascript" src="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js">
</script>
<script src="/api/jq/5733e326a88fd/fakeLoader.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".fakeloader").fakeLoader({
timeToHide: 1200,
bgColor: "#2ecc71",
spinner: "spinner1"
}
);
}
);
</script>

  

fakeLoader页面加载前loading演示8种效果的更多相关文章

  1. 页面加载时loading效果

    页面加载时loading效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  2. 在页面加载前先出现加载loading,页面加载完成之后再显示页面

    在此加入一个关于页面加载成功之前先展现一个loading的案例: 如下代码写入js里放在html头部即可实现需求:添加的可以自己在css文件设置宽高,也可以放入一个background的gif的loa ...

  3. Ionic页面加载前 ionic页面加载完成 ionic页面销毁执行的事件

    ionic 中$ionicView.beforeEnter(页面刚加载前)  $ionicView.afterEnter  (页面加载完成) $destroy(页面销毁) 广播事件 //ionic c ...

  4. vue页面加载前显示{{代码}}的原因及解决办法

    进入正题,简单说说自己对html中出现{{}}的原因及解决办法: 这样写的话,就会出现{{}}一闪的情况: 原因:html的加载顺序: 解析html结构 -> 加载外部脚本和样式表文件 -> ...

  5. 插件-监控页面加载之loading

    查看效果点https://icedjuice.github.io/plug-in/loading/loading.html 简单易用的loading插件,该插件并不是真正的监控页面的资源加载过程,而是 ...

  6. Jquery 在页面加载后执行的几种方式

    1.$(function(){  $("#a").click(function(){  //adding your code here  }); }); 2.$(document) ...

  7. jQuery页面加载初始化常用的三种方法

    当页面打开时我们需要执行一些操作,这个时候如果我们选择使用jquery的话,需要重写他的3中方法,自我感觉没什么区 别,看个人喜好了,第二种感觉比较简单明了: 第一种: 复制代码代码如下: <s ...

  8. 页面加载loading动画

    关于页面加载的loading动画,能度娘到的大部分都是通过定时器+蒙层实现的,虽然表面上实现了动画效果,实际上动化进程和页面加载进程是没有什么关系的,只是设置几秒钟之后关闭蒙层,但假如页面须要加载的元 ...

  9. css3实现loading效果--当页面加载过程中显示Loading的进度条,全部加载完成之后进度条消失

    一个页面等图片资源全部加载完成,会需要很长时间,用户体验会很差,所以我们需要loading来掩盖这个漫长的过程! emmm,定时器?写个定时器还要清除,万一造成内存泄露?定时器之间还会互相影响,呼呼呼 ...

随机推荐

  1. SDWebImage清除图片缓存

    背景: 使用 SDWebImage 库,由于内存中一直缓存着加载的图片,而导致内存过高(我们无法手动管理内存),弹出内存警告而导致程序很卡或者直接crash掉. 我的解决方法: 在AppDelegat ...

  2. php的mysql\mysqli\PDO(一)mysql

    原文链接:http://www.orlion.ga/1140/ 工作中数据库的操作都被封装好了,这些怎么用的都快忘了干脆写篇博客重新复习下,以后要是再忘记了可以看这篇文章. PHP 5.5.0 起已废 ...

  3. Android线程机制——AsyncTask

    对于Android为什么要使用多线程,因为从Android4.0之后,谷歌规定了网络操作不允许放在主线程中执行,由此就有了多线程的机制,有个JAVA学习经验的朋友一定知道多线程指的是什么,简单来讲就是 ...

  4. 初始化的一些问题(Vector使用)

    import java.util.Vector; import java.util.Iterator; import java.util.Arrays; import java.util.ArrayL ...

  5. U3D中的 Coroutine程序 解析

    今天咱就说说协同程序coroutine. 什么是协同程序 先说说啥是协程:它的表现形式非常像线程,对线程有过接触的朋友可能更理解我这句话的意思,你没接触过线程,那么理解它会有一些难度.但是它不存在线程 ...

  6. DRA(Data Recovery Advisor)的使用

    关于DRA的官方描述: The simplest way to diagnose and repair database problems is to use the Data Recovery Ad ...

  7. Nutch源码阅读进程4---parseSegment

    前面依次看了nutch的准备工作inject和generate部分,抓取的fetch部分的代码,趁热打铁,我们下面来一睹parse即页面解析部分的代码,这块代码主要是集中在ParseSegment类里 ...

  8. 初探JavaScript(三)——JS带我"碰壁"带我飞

    已经写了两篇关于小白的JavaScript之行,不可否认,每一种语言都有其精华与糟粕之处,来不及细细体味其精华奥妙,也没法对其评头论足,只能先了解,后深入.到目前为止已经看完<JavaScrip ...

  9. 移植SlidingMenu Android library,和安装example出现的问题解决

    很多项目都用到类似左侧滑动菜单的效果,比如facebook,evernote,VLC for android等等,这很酷 源代码可以从GitHub的https://github.com/jfeinst ...

  10. redis学习之三配置文件redis.conf 的含义

    摘自http://www.runoob.com/redis/redis-conf.html 安装redis之后的第一件事,我就开始配置密码,结果总是不生效,而我居然还没想到原因.今天突然用命令行设置了 ...