Fakeloader loading加载中插件使用说明

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

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

使用方法:

1、body中插入以下html代码

1<div class="fakeLoader"></div>

2、head标签里嵌入

1<link rel="stylesheet" href="css/fakeloader.css">

3、引入js库

12<script src="js/jquery.min.js"><script src="js/fakeloader.min.js">

4 调用fakeloader

123<script type="text/javascript">$(".fakeloader").fakeLoader();</script>

5 选项解释

1234567$(".fakeloader").fakeLoader({timeToHide:1200, //加载效果的持续时间zIndex:"999",//spinner:"spinner1",//可选值 'spinner1', 'spinner2', 'spinner3', 'spinner4', 'spinner5', 'spinner6', 'spinner7' 对应有7种效果bgColor:"#2ecc71"//加载时的背景颜色imagePath:"yourPath/customizedImage.gif" //自定义的加载图片,见demo8.html});

爬坑:

  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"
        });
    }
赞 (0) 打赏

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏