fakeLoader页面加载前loading演示8种效果

提高用户体验的插件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>

　　

时间： 2024-10-28 23:57:52

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

HTML 页面加载 Flash 插件的几种方法

前言 之所以写这篇文章,主要是因为组长给提的一个新的需求--使用浏览器调用电脑的摄像头,来实现即时拍照的功能.在网上查了很多资料,由于这样那样的原因,最终选择了使用flash插件来调用pc的摄像头.当然,这个需求是基于B/S架构的,因此,就在想怎么把它嵌入到前端的HTML页面中. 题外话 当然,这里还没有考虑到封装,主要是先以实现为目的,后续工作再根据业务进行抽象,封装成通用的组件.好了,废话不多说,看重点. 嵌入插件 使用 object 和 embed 标签 代码展示 <span style=

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

这篇文章主要介绍了Jquery 在页面加载后执行的几种方式,需要的朋友可以参考下 方式1: $(function(){ initPublish(); }); 说明: initPublish() 即为你要运行的JS函数:这段代码,放在页面最低端. 方式2: $(document).ready(function () { // add your code here initPublish(); $(.a).click( function (){ // add your code here }); }

vue页面加载前根据数据切换钩子函数

export default { route: { activate: function (transition) { this.$http.patch('/api/merchants/' + window.user.merchantId + '/users/' + window.user.id + '/items/' + this.$route.params.id + '/give').then(function (response) { if (response.data.data.stat

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

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

jQuery页面加载初始化的几种方法

在新的公司里工作,最近一直在做关于js和jQuery的开发,下面三种是最常见的jquery页面加载初始化的方法 第一种,去年实习时的公司用的是这样 $(function(){ //定义局部变量 //var a; ... init(); }); function init(){ alert(123); } 第二种,和上面的写法类似 jQuery(function($){ //定义局部变量 //var a; ... init(); }); function init(){ alert(123); }

页面加载完毕相关信息淡入效果

前言: 年关将至,公司一部分同事已经回老家了,虽然过年不回去,但想到明天上完班就放假了内心多少有点激动.工作上的事情不要紧的已经没心情再看了,加之今天领导不在 哈哈哈... 搞点自己的爱好! 看bootstrap的优站精选时看到了一个页面加载完毕时的一个淡入效果(http://www.mikeinghamdesign.com/),于是... 效果图: 实现思路: 此处实现主要用外边距margin-top属性和透明度opacity属性: 1.淡入区块初始设置一定上外边距,透明度完全透明: 2.页面

页面加载时的 Loading 效果

//页面加载时的 Loading 效果 $(window).load(function () { window.setTimeout(function () { $('body').removeClass('loading'); }, 1000); }); 上面的JS部分: HTML 部分 <body class="loading"> <div class="main"> </div></body> css .load

JS实现页面加载完毕之前loading提示效果

1.获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement.clientWidth; 2.计算loading框距离顶部和左部的距离(loading框的宽度为215px,高度为61px) var _LoadingTop = _PageHeight > 61 ? (_PageHeight - 61) / 2 : 0, _LoadingLe

页面加载和图片加载loading

准备放假了!也是闲着了 ,就来整理之前学到或用到的一下知识点和使用内容,这次记录的是关于加载的友好性loading!!!这里记录一下两种加载方法 1.页面加载的方法,它需要用到js里面两个方法 document.onreadystatechange = function(){} document.readyState//有两个值 interactive//加载中 complete//加载完成 两个方法同时使用 document.onreadystatechange = function(){ i