本站公告: 本站主题正在调试中,可能会出现一些访问异常....

Fakeloader loading加载中插件使用说明

前端开发 兰亭楼 0评论 浏览

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库

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

4 调用fakeloader

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

5 选项解释

1
2
3
4
5
6
7
$(".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 用图片代代替

  2. 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"
            });
        }

转载请注明: 兰亭楼 » Fakeloader loading加载中插件使用说明

发表我的评论 换个身份
取消评论

Hi,您需要填写昵称和邮箱!

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