1

This is my simple loading gif JS:

$(document).ready(function() {

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

Class for loading 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;
}

If the user has Javascript disabled, the users cannot access the page because the loading gif does not go away (in the CSS the height/width of the div is 100%)

Is there a way to only show my preloader div if the user has Javascript enabled?

tkwitten
  • 113
  • 9
  • Possible duplicate of [How to detect if JavaScript is disabled?](http://stackoverflow.com/questions/121203/how-to-detect-if-javascript-is-disabled) – Alex Nov 19 '15 at 16:00
  • Not quite the same question, although is relevant – vogomatix Nov 24 '15 at 10:54

2 Answers2

1

I was able to get it to work using the following code:

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

Use a <noscript> section to put a css rule to hide your loading screen and unhide your normal content. noscript in header blocks is valid 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>

Edit: Above works in latest Firefox, try other browsers. Expect it will work in browsers that support HTML5, may be problems with old browers.

vogomatix
  • 4,856
  • 2
  • 23
  • 46