如果用户禁用了Javascript，则预加载程序JS加载Gif不会消失

Preloader JS Loading Gif Does Not Disappear if User Has Javascript Disabled

本文关键字：加载 JS 程序 Gif 消失 用户 Javascript 如果      更新时间：2023-09-26

这是我简单的加载gif JS:

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

加载gifdiv的类：

.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？

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

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

使用<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的浏览器中工作，这可能是旧浏览器的问题。

相关文章：