CSS/JQuery/Javascript加载图标仅在firefox中有效_Javascript_Jquery_Css

CSS/JQuery/Javascript加载图标仅在firefox中有效

javascript jquery css

CSS/JQuery/Javascript加载图标仅在firefox中有效,javascript,jquery,css,Javascript,Jquery,Css,我有一个非常简单的加载图标，div是全屏的，图像只是一个gif： <div id="loading" class="a"> <img id="loading-gif" src="img/general/712.gif" width="50px" height="50px" class="b" /> </div> 当我想显示它时，我是这样做的： var hCenter = (Math.floor(window.innerWidth/2)) - 25; va

我有一个非常简单的加载图标，div是全屏的，图像只是一个gif：

<div id="loading" class="a">
  <img id="loading-gif" src="img/general/712.gif" width="50px" height="50px" class="b" />
</div>

当我想显示它时，我是这样做的：

var hCenter = (Math.floor(window.innerWidth/2)) - 25;
var vTop = window.pageYOffset || document.documentElement.scrollTop;
var vCenter = (Math.floor(window.innerHeight/2)) - 25;  

$("#loading-gif").css({top: vTop + vCenter, left: hCenter});
$("#loading").show();

.hidden {
display:none;
}

并隐藏：

$("#loading").hide();

这在firefox中运行良好，但在Chrome或iPhone中似乎不起作用。我在任何地方都看不到错误-知道为什么有些浏览器不喜欢它吗

谢谢

您应该这样做：

var hCenter = (Math.floor(window.innerWidth/2)) - 25;
var vTop = window.pageYOffset || document.documentElement.scrollTop;
var vCenter = (Math.floor(window.innerHeight/2)) - 25;  

$("#loading-gif").css({top: vTop + vCenter, left: hCenter});
$("#loading").show();

.hidden {
display:none;
}

然后可以添加和删除类以显示和隐藏它

要隐藏：

$("#loading").addClass("hidden");

显示：

$("#loading").removeClass("hidden");

试试这个

JavaScript

CSS

HTML


加载。。。
这是正文

.show（）

不会隐藏它！我想知道这个代码是否隐藏了它<代码>$（“#加载”）.show（）

$（“#加载”）.hide（）是一个隐藏你忘记提到的单位+'px'
=>$（“#加载gif”）.css（{顶部：（vTop+vCenter）+'px'，左侧：hCenter++'px'}）$（“#加载”）.toggle（）；
/* cover complete screen */
#preloader {
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%;
    background-color:#FFF; 
    z-index:9999; /* makes sure it stays on top */
    -webkit-transition:none;
            transition:none;}

/* preloader container at the middle */
#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px; /* is width and height divided by two */
    text-align:center;
}

<body>
    <div id="preloader">
        <div id="status">
            <h4>Loading...</h4> <!-- include your loading img here -->
        </div>
    </div>

    <h3>This is a body text</h3>
</body>