【 jQuery】页面加载 fakeLoader.js 及修改

在日常网站制作中，常常预见网站中内容过多，或者含有大量图片，导致加载缓慢，动画效果失常的情况。

于是小编查找了相关解决方法，下面是最为简单且实用的一种。

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