提高用户体验的插件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. hibernate(八)一对多关联

    一.一对多单向关良 一对多单向关联与多对一相似 假设一个组有多个用户,即一(Group)对多(User) 需要在Group类中添加一个User类的Set集合(数据库中的用户不可能是重复的,所以要用Se ...

  2. 【博客美化】04.自定义地址栏logo

    博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加Git ...

  3. Android开发常用属性

    1.android string.xml 文字中间加入空格 android string.xml前后加空格的技巧 <string name="password">密   ...

  4. mac+apache+php+phpmyadmin集成php开发环境配置

    刚开始才接触php才发现macos还是比较强大了,macbook不仅是时尚达品还很实用哦. --------------他山之石-------------------------- http://da ...

  5. 使用office制作图章公章

    制作公章的软件非常多,随便到网上一搜就有成千成百的软件或小工具,常用的有PS.Coreldraw.Ai.Word等,拥有一款office可以使用word来制作,方法挺简单,功能挺强大.寥寥数笔难以形容 ...

  6. DA - 信息分析思路概要

    要素 局部 --->整体 显性 --->隐性 表面 --->本质 割裂 --->联系 特殊 --->普遍 串行 --->并发 纵向 --->横向 单点 --- ...

  7. Adaptive Placeholder – 自适应的占位符效果

    在早期,我们都是通过使用 JavaScript 来实现占位符功能.而现在,HTML5 原生提供的 placeholder 属性让我们在现代浏览器轻松就能实现这样的功能.这里向大家分享一个自适应的占位符 ...

  8. Web 前端开发精华文章推荐(HTML5、CSS3、jQuery)【系列二十二】

    <Web 前端开发精华文章推荐>2014年第一期(总第二十二期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML ...

  9. CSS 魔法系列:纯 CSS 绘制图形(各种形状的钻石)

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  10. VS2012连接到OSC@Git

    osc终于全面开放git库了,这是我一直期待的事,也是促使我从CSDN转回OSC社区的重要原因之一.而这次我来教大家如何用osc@git来进行简单的版本控制.对于git,我自身也是近几周才开始学习,有 ...