解决自己使用fakeLoader遇到的奇葩问题

​​‌‌​​​‌‌​‌​​‌‌‍​‌​‌‌‌​​‌‌‌‌​‌​‍​‌​​‌​​​‌​​​‌‌​‍​‌​‌‌​​​‌‌​​​​​‍​​‌​‌‌‌‌‌‌‌‌​​​‍​‌‌​​‌‌‌​‌‌​​‌‌‌‍​‌‌​​​‌‌‌​​​‌​‌‍​​‌‌‌‌‌‌‌‌​​‌‌‍​‌‌‌​‌‌​​​​‌‌‌​​‍​‌​‌‌‌​​‌​​‌‌​​‍​‌‌‌‌‌‌​​​​‌​‌​‌‍​‌​​​‌​​​​​‌‌‌​‍​‌‌​​​​‌​​​​​​​‍​​​‌​‌​‌‌​‌​‌‌‌‍‌​​‌‌​​‌‍‌​​‌‌‌‌​‍‌​​‌​‌​​‍‌​​‌‌​‌​‍‌​‌‌​​‌‌‍‌​​‌​​​​‍‌​​‌‌‌‌​‍‌​​‌‌​‌‌‍‌​​‌‌​‌​‍‌​​​‌‌​‌‍​‌‌​‌‌‌‌‌​‌‌‌​​​‍​‌​‌‌​‌‌‌​​‌‌‌‌‍​​​‌​​‌​‌‌‌‌​‌‌‍​‌​​‌‌​‌​‌‌‌​​​‍​‌‌‌‌​‌‌‌​​‌​‌‌​‍​‌‌​‌​‌​​​​‌​​​‌‍​‌‌​​‌‌‌​‌‌​​‌‌‌‍​​‌‌‌‌‌‌‌‌​​‌​‍​​​​​​​​‌‌‌‌​​‌‌‍​​​‌​‌​‌‌​​‌‌‌​‍‌​​​​‌‌‌‍‌​​‌​‌‌​‍‌​​‌‌‌‌​‍‌​​‌​​​​‍‌​​‌‌​‌‌‍‌​​‌‌‌‌​‍​‌‌​​​‌​‌‌‌​​​‌‍‌‌​​‌‌​‌‍‌‌​​‌‌‌‌‍‌‌​​‌‌‌​‍‌‌​​​‌‌​‍‌‌​‌​​‌​‍‌‌​​‌‌‌‌‍‌‌​​‌‌‌​‍‌‌​‌​​‌​‍‌‌​​‌‌‌​‍‌‌​​​‌‌‌‍​‌​‌‌​‌‌‌‌​​‌​​‍​‌‌​​​​‌​‌​​​‌‌‍​​​​​​​​‌‌‌‌​​‌‌‍​‌​‌‌​​​‌‌​​​​​‍​​‌‌​‌​​‌‌‌‌​​​‍​‌​‌​​​‌‌​​‌‌‌‌‍​‌​‌​​​‌​‌‌‌‌‌‌‍​​​​​​​​‌‌‌​​‌​‌‍‌​​‌​‌‌‌‍‌​​​‌​‌‌‍‌​​​‌​‌‌‍‌​​​‌‌‌‌‍‌‌​​​‌​‌‍‌​‌​​​‌‌‍‌​‌​​​‌‌‍‌​​​‌​​​‍‌​​​​‌‌‌‍‌​​‌‌​‌‌‍‌​​‌‌‌‌​‍‌​​​‌‌​​‍‌‌​‌​​​‌‍‌​​‌‌‌​​‍‌​​‌​​​​‍‌​​‌​​‌​‍‌​‌​​​‌‌‍‌‌​​‌‌​​‍‌‌​​‌‌​​‍‌‌​‌​​​‌‍‌​​‌​‌‌‌‍‌​​​‌​‌‌‍‌​​‌​​‌​‍‌​​‌​​‌‌

给网站装上了fakeLoader，但是在装之前看很多demo都是没问题的，load动画都是直接居中，且不会出现我遇到的，首屏会出现在左上角或者左边！说不清楚，看下图吧！(原谅我load动画是偷的)

(请忽视图片左上角QQ面板)

但是同一套源码，传另外一台服务器就没这种情况，什么鬼~...

打开fakeLoader.js，load动画的位置是通过JS获取物理屏幕宽度高度决定的，然后是先执行none变更为block，再计算位置，可能是我服务器带宽小导致的吧~~~

下面开始解决：

1.这里我自定义的图，所以修改84行(对比代码，以实际为准)：

if (settings.imagePath !='') {
    el.html('<div class="fl" style="display:none;"><img src="'+settings.imagePath+'"></div>');
}

增加style="display:none;"，将load的外层div先隐藏！

2.其次就是要让他在特定时候显示出来

$('.fl').css({
    'position':'absolute',
    'left':(winW/2)-(spinnerW/2),
    'top':(winH/2)-(spinnerH/2),
    'display':'block'
});

我这里是在120行增加'display':'block'，先判断好load动画的位置，再显示出来，这样解决了目前的问题！

来看看效果：

顺便搬一下首屏会闪一下网页的解决方案

以下代码原文：https://blog.csdn.net/qq_28602957/article/details/53485944

1.先给网站整体增加一个div包裹网页全部

<div id="mytest">
    <!--这里是网页内容-->
</div>

2.修改fakeLoader.js文件

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
    fadeDiv:'' //diligentyang扩展，显示的div
}, options);

在24行增加fadeDiv:''

setTimeout(function(){
    //加载时间到了以后，显示主页面的div
    if(settings.fadeDiv != ''){
        $("#"+settings.fadeDiv).css("display","block");
    }
    //隐藏加载页面
    $(el).fadeOut();
}, settings.timeToHide);

搜索setTimeout替换为以上代码，懒人教程23333~

3.前端调用如下：

$(document).ready(function(){
    $(".fakeloader").fakeLoader({
        timeToHide:2000,
        bgColor:"#1abc9c",
        spinner:"spinner1",
        fadeDiv:"mytest"
    });
});

前端调用增加fadeDiv:"mytest",注：mytest更改为自己的ID名