当前位置: 首页 > 工具软件 > fakeLoader.js > 使用案例 >

fakeLoader.js 第二次调用 失效

曾喜
2023-12-01

一,问题描述:一个页面有两个按钮需要调用ajax,显示loading效果

       原因如下:在第一次调用$(".fakeloader").fakeLoader({   timeToHide:3000,  // 加载效果的持续时间
        zIndex:"9999",
        bgColor:"#1cc09e", //加载时的背景颜色
        spinner:"spinner2" //可选值 'spinner1', 'spinner2', 'spinner3', 'spinner4', 'spinner5', 'spinner6', 'spinner7' 对应有7种效果
       });方法之后,源代码中会调用$(this).fadeOut() 默认给html页面中的div添加样式display: none;

position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; background-color: rgb(28, 192, 158); z-index: 9999; display: none;

    原因是display: none; 属性被设置none

   所以再次调用会无法显示loading效果

二,解决方法

修改fakeLoader.js  两个地方增加代码,settings 新增 display:'',属性 ,initStyles增加属性'display':settings.display

 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
            display:'',
            imagePath:'' // Default Path custom image
        }, options);
 var initStyles = {
            'position':settings.pos,
            'width':settings.width,
            'height':settings.height,
            'top':settings.top,
            'left':settings.left,
            'display':settings.display
        };

 

 类似资料: