MENU

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

January 18, 2019 • Read: 462 • JavaScript

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

fakeLoader-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名

Archives QR Code Tip
QR Code for this page
Tipping QR Code
Leave a Comment

已有 5 条评论
  1. 如果是我遇到这样的问题……"辣鸡主题,卸载!!"

    1. @Her Blue不是主题,是我其他非博客性质的网站,都是自己加这些东西,遇到问题就解决,以前遇到这种小问题直接忽视,不会去管!@(滑稽)

  2. 看起来还可以 = = 不过没看到你设置的这个……还是说你网站速度挺快的?

    1. @某昴486不是博客,我其他网站@(滑稽)

    2. @王小大@(滑稽) 懂了