一,问题描述:一个页面有两个按钮需要调用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
};