给网站装上了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名
如果是我遇到这样的问题……"辣鸡主题,卸载!!"
不是主题,是我其他非博客性质的网站,都是自己加这些东西,遇到问题就解决,以前遇到这种小问题直接忽视,不会去管!@(滑稽)
看起来还可以 = = 不过没看到你设置的这个……还是说你网站速度挺快的?
不是博客,我其他网站@(滑稽)
@(滑稽) 懂了