Fakeloader loading加载中插件使用说明

8种fakeloader页面加载效果代码，支持7种效果和自定义图片，兼容主流浏览器！

GitHub地址：http://joaopereirawd.github.io/fakeLoader.js/

使用方法：

1、body中插入以下html代码

2、head标签里嵌入

3、引入js库

4 调用fakeloader

5 选项解释

爬坑：

1. 请使用未压缩版本，压缩版本是老版本问题多多！！ 页面不刷新再次显示 需要修改 最后几行源代码  见注释
2. 兼容IE9以下需要再js源码中重写 centLoader方法为，修改后的源代码如下

    (function ($) {
    $.fn.fakeLoader = function(options) {
        //Defaults
        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
        }, options);
        //Customized Spinners
        var spinner01 = '<div class="fl spinner1"><div class="double-bounce1"></div><div class="double-bounce2"></div></div>';
        var spinner02 = '<div class="fl spinner2"><div class="spinner-container container1"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="spinner-container container2"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="spinner-container container3"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div></div>';
        var spinner03 = '<div class="fl spinner3"><div class="dot1"></div><div class="dot2"></div></div>';
        var spinner04 = '<div class="fl spinner4"></div>';
        var spinner05 = '<div class="fl spinner5"><div class="cube1"></div><div class="cube2"></div></div>';
        var spinner06 = '<div class="fl spinner6"><div class="rect1"></div><div class="rect2"></div><div class="rect3"></div><div class="rect4"></div><div class="rect5"></div></div>';
        var spinner07 = '<div class="fl spinner7"><div class="circ1"></div><div class="circ2"></div><div class="circ3"></div><div class="circ4"></div></div>';
        //The target
        var el = $(this);
        //Init styles
        var initStyles = {
            'position':settings.pos,
            'width':settings.width,
            'height':settings.height,
            'top':settings.top,
            'left':settings.left
        };
        //Apply styles
        el.css(initStyles);
        //Each
        el.each(function() {
            //Add customized loader image
            if (settings.imagePath !='') {
                el.html('<div class="fl"><img src="'+settings.imagePath+'"></div>');
                imgCenter()
            }else {
                var a = settings.spinner;
                switch (a) {
                    case 'spinner1':
                        el.html(spinner01);
                        break;
                    case 'spinner2':
                        el.html(spinner02);
                        break;
                    case 'spinner3':
                        el.html(spinner03);
                        break;
                    case 'spinner4':
                        el.html(spinner04);
                        break;
                    case 'spinner5':
                        el.html(spinner05);
                        break;
                    case 'spinner6':
                        el.html(spinner06);
                        break;
                    case 'spinner7':
                        el.html(spinner07);
                        break;
                    default:
                        el.html(spinner01);
                }
                centerLoader();
            }
        });
        //Time to hide fakeLoader
        setTimeout(function(){
                   $(el).fadeOut(function(){
                   $(this).removeAttr('style'); // 页面不刷新再次显示需在此处恢复原状
                   $('.fl').remove();
                });
               }, settings.timeToHide);
        //Return Styles
        return this.css({
            'backgroundColor':settings.bgColor,
            'zIndex':settings.zIndex
        });
    }; // End Fake Loader
    //Center Spinner
    function centerLoader() {
        var winW = $(window).width();
        var winH = $(window).height();
        var spinnerW = $('.fl').outerWidth();
        var spinnerH = $('.fl').outerHeight();
        $('.fl').css({
            'position':'absolute',
            'left':(winW/2)-(spinnerW/2),
            'top':(winH/2)-(spinnerH/2)
        });
    }
    function imgCenter() {
        var winW = $(window).width();
        var winH = $(window).height();
        var spinnerW = $('.fl img').outerWidth();
        var spinnerH = $('.fl img').outerHeight();
        $('.fl').css({
            'position':'absolute',
            'left':(winW/2)-(spinnerW/2),
            'top':(winH/2)-(spinnerH/2)
        });
    }
    $(window).load(function(){
        centerLoader();
        $(window).resize(function(){
            centerLoader();
        });
    });
}(jQuery));

1. 使用中兼容IE8 IE9 用图片代代替

if(email && password){
    function IETester(){
        var UA = navigator.userAgent;
        if(/msie/i.test(UA)){
            return UA.match(/msie (\d+\.\d+)/i)[1];
        }
    }
    var IEVersion = IETester();
    if (IEVersion && IEVersion < 10){  //Less than IE10 show gif
        $(".fakeloader").fakeLoader({
            timeToHide: 1800,
            bgColor: "#1abc9c",
            imagePath:"images/cloud.gif"
        });
    }else {                            //ie10 ie11 or chrome or other modern browser
        $(".fakeloader").fakeLoader({
            timeToHide: 1800,
            bgColor: "#1abc9c",
            spinner: "spinner6"
        });
    }