【 jQuery】页面加载 fakeLoader.js 及修改
2016-12-06 13:32
393 查看
在日常网站制作中,常常预见网站中内容过多,或者含有大量图片,导致加载缓慢,动画效果失常的情况。
于是小编查找了相关解决方法,下面是最为简单且实用的一种。
fakeLoader.js 是轻量级的 jQuery 插件,帮助你创建动态的全屏加载掩饰微调效果,模拟页面预加载的效果。
插件下载地址:http://www.oschina.net/p/fakeloader-js
效果演示:
使用方法:
1、body中插入以下html代码
2、head标签里嵌入
3、引入js库
4 调用fakeloader
5 选项解释
很容易就能实现在访问页面的时候,出现类似进度条的效果,且可以给网页一定的加载时间,提高访问质量。
但是小编在使用的过程中发现一点点不足,
就是,如果网页内容过多,应用以上代码时 ,会闪烁一下网页内容,然后才出现加载页面的现象。
是因为
http://www.w3school.com.cn/jquery/event_ready.asp
一种解释为:
为了避免此现象的发生,小编改进了一下插件代码
1.在页面的最外层,添加一个大的div,然后设置该div的display属性为none,设置id为mytest
2.修改插件部分代码
然后前端调用
参考文档:jQuery中
http://www.poluoluo.com/jzxy/201509/424718.html
http://www.jb51.net/article/51079.htm
于是小编查找了相关解决方法,下面是最为简单且实用的一种。
fakeLoader.js 是轻量级的 jQuery 插件,帮助你创建动态的全屏加载掩饰微调效果,模拟页面预加载的效果。
插件下载地址:http://www.oschina.net/p/fakeloader-js
效果演示:
使用方法:
1、body中插入以下html代码
<div id="fakeLoader"></div>
2、head标签里嵌入
<link rel="stylesheet" href="css/fakeloader.css">
3、引入js库
<script src="js/jquery.min.js"> <script src="js/fakeloader.min.js">
4 调用fakeloader
<script type="text/javascript"> $(".fakeloader").fakeLoader(); </script>
5 选项解释
$(".fakeloader").fakeLoader({ timeToHide:1200, //加载效果的持续时间 zIndex:"999",// spinner:"spinner1",//可选值 'spinner1', 'spinner2', 'spinner3', 'spinner4', 'spinner5', 'spinner6', 'spinner7' 对应有7种效果 bgColor:"#2ecc71", //加载时的背景颜色 imagePath:"yourPath/customizedImage.gif" //自定义的加载图片,见demo8.html });
很容易就能实现在访问页面的时候,出现类似进度条的效果,且可以给网页一定的加载时间,提高访问质量。
但是小编在使用的过程中发现一点点不足,
$(document).ready(function(){ $(".fakeloader").fakeLoader({ timeToHide:1200, bgColor:"#3498db", spinner:"spinner4" }); });
就是,如果网页内容过多,应用以上代码时 ,会闪烁一下网页内容,然后才出现加载页面的现象。
是因为
$(document).ready()搞的鬼
http://www.w3school.com.cn/jquery/event_ready.asp
一种解释为:
使用 $(document).ready(),你能让你的事件在window加载之前加载或触发。所有你写在这个方法里面的都准备在最早的时刻加载或触发。也就是说,一旦DOM在浏览器中注册后,$(document).ready()里的代码就开始执行。这样用户在第一眼看见页面元素时,特效就可以运行了。
为了避免此现象的发生,小编改进了一下插件代码
1.在页面的最外层,添加一个大的div,然后设置该div的display属性为none,设置id为mytest
2.修改插件部分代码
var settings = $.extend({ timeToHide:1200, // Default Time to hide fakeLoader pos:'fixed',// Default Position top:'0px', // Default Top value left:'0px', // Default Left value width:'100%', // Default width height:'100%', // Default Height zIndex: '999', // Default zIndex bgColor: '#2ecc71', // Default background color spinner:'spinner7', // Default Spinner imagePath:'', // Default Path custom image fadeDiv:'' //diligentyang扩展,显示的div }, options);
setTimeout(function(){ //加载时间到了以后,显示主页面的div if(settings.fadeDiv != ''){ $("#"+settings.fadeDiv).css("display","block"); } //隐藏加载页面 $(el).fadeOut(); }, settings.timeToHide);
然后前端调用
$(document).ready(function(){ $(".fakeloader").fakeLoader({ timeToHide:2000, bgColor:"#1abc9c", spinner:"spinner1", fadeDiv:"mytest" }); });
参考文档:jQuery中
$.extend()的用法
http://www.poluoluo.com/jzxy/201509/424718.html
http://www.jb51.net/article/51079.htm
相关文章推荐
- 使用fakeLoader.js创建页面加载动画
- 修改jquery.lazyload.js实现页面延迟载入
- js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
- Jquery修改页面标题title其它JS失效的解决方法
- 【HTML/JS】利用JQuery的load函数动态加载其它页面的内容的实现代码
- jQuery oLoader实现的加载图片和页面效果
- 使用jquery当页面打开时,将一个事件绑定到控件(同时执行两个事件),并修改加载样式类中的样式
- 页面加载完成后再执行JS的jquery写法以及区别说明
- [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件
- 页面加载完成后再执行JS的jquery写法以及区别说明
- jquery+easyui+window href加载页面,子页面JS失效问题
- 解决用jquery load加载页面到div时,不执行页面js的问题
- 如何根据页面决定是否加载jquery.js
- jquery加载页面时调用js的方法
- 解决用jquery load加载页面到div时,不执行页面js的问题
- 使用JQuery 加载页面时调用JS
- 第一次自己写jquery图片延迟加载插件,不通用,但修改一下还是可以使用到很多页面上的
- js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
- jQuery在页面加载时动态修改图片尺寸的方法
- jQuery oLoader实现的加载图片和页面效果