Question

这是我的简单加载gif JS：

$(document).ready(function() {

 $(window).load(function(){
    $('.doc-loader').fadeOut('slow');
 });

加载gif div的类：

.doc-loader{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: visible;
background: #ffffff url('../images/gears.gif') no-repeat center center;
z-index: 100000;
text-align: center;
padding-top: 535px;
}

如果用户禁用了Javascript，则用户无法访问该页面，因为加载的gif不会消失（在CSS中，div的高度/宽度为100％）

如果用户启用了Javascript，有没有办法只显示我的预加载器div？

Answer 1

使用<noscript>部分放置css规则以隐藏加载屏幕并取消隐藏正常内容。标头块中的noscript是有效的HTML5。

<!DOCTYPE html>
<html>
<head>
<style>
#main {display: none };
</style>
<noscript>
<style>
#loader { display: none; }
#main { display: block; }
</style>
</noscript>
</head>
<body>
  <div id="loader">
    <p>This is the loader...</p>
  </div>
  <div id="main">
    <p>Main content</p>
  </div>
</body>

编辑：以上适用于最新的Firefox，请尝试使用其他浏览器。预计它将在支持HTML5的浏览器中运行，可能是旧浏览器的问题。

Answer 2

我能够使用以下代码使其工作：

<head>
    <noscript>
        <style>#doc-loader { display: none }</style>
    </noscript>
</head>
<body>
    <div class="doc-loader" id="doc-loader"></div>
</body>

如果用户已禁用Javascript，则预加载器JS加载Gif不会消失

2 个答案: