How to make a preloader with a gif before the page load?

Question

I first want to tell you guys that I am extremely new to web designing, so i was experimenting and I really wanted to learn how to create a preloader with a gif before the page load. I tried, but every time, it either continually show the preloader and not the actual site, or doesn't show the preloader at all. Im not sure if i didnt download somethings or it's the program I'm using which is notepad++ but i dont know what im doing wrong. And i followed every examples to do it, but nothing work. Here is my html file

<html>
  <head> 
    <meta charset = "uft-8">
    <title>Tester</title>
    <link href =" test.css" type = "text/css" rel = "stylesheet"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type = "text/javascript"></script>
    <script>
      $(document).ready(function() {
        $(window).load(function() {
          preloaderFadeOutTime = 500; 

          function hidepreloader() {
            var preloader = $('.tester');
            preloader.fadeOut(preloaderFadeOutTime);
          }
          hidepreloader(); 
        });
      });
    </script>
  </head>   
  <body>
    <div class = "tester"></div>
    <div class = "overlay"></div>
    </div>
    <div class = "wrapper">
      <div class = "heading"> 
        <h1> My page</h1>
      </div>
      <div class = "navigation">navigation</div> 
      <div class = " content">main content</div>
      <div class = "sidebar">addition</div> 
      <div class = "footer">this is an experiment</div>
    </div>
  </body> 
</html>

And this is my CSS file

#tester { 
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,.8);
  position: fixed;
  left: 0;
  top: 0;
}
#overlay {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url(../downloads/Giphy.gif) 50% 50% no-repeat rgb(249,249,249);
}
.wrapper {
  background: #000000;
  width: 600px; 
  margin: 0 auto 0 auto;
}
.heading { 
  height: 100px; 
  background: green; 
  text-align:center;
  padding: 20px; 
}
.navigation {
  height: 50px; 
  background: lightgreen; 
}
.content { 
  min-height: 400px; 
  background-image: url(../downloads/test.jpg);
  width: 400px; 
  float: left;
}
.sidebar { 
  width: 200px; 
  float: right;
  background:lightblue; 
  min-height: 400px; 
}
.footer { 
  clear: both; 
  background: black;
  height: 40px; 
  color: white; 
  text-align: center; 
  padding: 10px;
}
h1 { 
  text-align: center; 
  font-family: "times new roman" 
  font: 24pt;
  color: #ff3819;
}

You should remove the single "" – Jeroen Heier May 14 '17 at 07:34 — Jeroen Heier, May 14 '17 at 07:34

score 1 · Answer 1 · answered May 14 '17 at 08:19

You can set the downloader gif in HTML background and hide body as long as the page is not fully loaded :

css

body {
  opacity:0;
  transition:0.5s;
}

JavaScript

window.onload= function() {
  document.body.style.opacity="1"// opacity allows transition
}

example switching display

window.onload= function() {
  document.body.style.display="block"
}

html {
  height:100%;
  background:url(https://www.engagewp.com/wp-content/uploads/2014/06/preloader.gif) center no-repeat;
}
img {
  max-width:100%;
}
body {
  background:white;
  display:none;
}

<h1>HTML Ipsum Presents</h1>
let-s use some big image 
<img src="http://lorempixel.com/1200/1500"/> 
<img src="http://lorempixel.com/1200/1501"/> 
<img src="http://lorempixel.com/1200/1502"/>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>

<img src="http://lorempixel.com/1200/1503"/> 
<img src="http://lorempixel.com/1200/1504"/> 
<img src="http://lorempixel.com/1200/1505"/>
<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<h3>Header Level 3</h3>

<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>
#header h1 a {
  display: block;
  width: 300px;
  height: 80px;
}
</code></pre>

or switching opacity that fades in content

window.onload= function() {
  document.body.style.opacity="1"
}

html {
  height:100%;
  background:url(https://www.engagewp.com/wp-content/uploads/2014/06/preloader.gif) center no-repeat;
}
img {
  max-width:100%;
}
body {
  background:white;
  opacity:0;
  transition:0.5s
}

<h1>HTML Ipsum Presents</h1>
let-s use some big image 
<img src="http://lorempixel.com/1200/1500"/> 
<img src="http://lorempixel.com/1200/1501"/> 
<img src="http://lorempixel.com/1200/1502"/>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>

<img src="http://lorempixel.com/1200/1503"/> 
<img src="http://lorempixel.com/1200/1504"/> 
<img src="http://lorempixel.com/1200/1505"/>
<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<h3>Header Level 3</h3>

<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>
#header h1 a {
  display: block;
  width: 300px;
  height: 80px;
}
</code></pre>

philipp · Answer 2 · 2017-05-14T07:30:35.340

Basically your html and css looks fine on the first glance. If you remove the Javascript, does the preloader show up as expected? If so, than it is a JS problem.

Your <script> tag appears in the <head> so before any markup, which defines the preloader, but that should not be a problem since you are waiting for $(document).ready(). But AFAIK that one is triggered when the DOM is ready, what does not mean that all images and assets are downloaded as well. Probably $(window).on('load', function () { … }) might be better in that situation.

Another thing that might be the case is: The page is loaded so fast, that you might not actually see the preloader, since it gets hidden »right away«. So to make sure, you can set a Timeout to delay that, like so:

$(document).ready(function () {
  setTimeout(function () {
    hidePreloader();
  }, 1000); //wait a second
});

Or, another thing you can do instead of a timeout, is to use the chrome developer tools, and set a network throttle within the network tab, that way you might get a better feeling how you page will look when downloaded with not much bandwidth. I guess, that you are using either a localhost, or just a plain file:/// in you browser, what load really fast. However, If you tell the browser to hide the preloader as soon as everything is loaded, to hide the preloader, and there is nothing more than a preloader on the page, it will be hidden as soon as it becomes visible.

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

I suggest to you to :

convert the Gif image to base64
use finish-loading detector e.g. jquerys $(document).load(fn) - as you did

Converting Gif image to base64 and implementing in HTML

So, The reson to do it is that is kind'a "Preloaded" image and for loaders you want less latency.

To convert, you can use online base64 convertor E.g. http://www.askapache.com/online-tools/base64-image-converter/

To implement, than you can implement it like this post How to display Base64 images in HTML?

<div>
    <p>Taken from wikpedia</p>
    <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
</div>

You can implement it as CSS also - (not recommended for loader)

li {
  background: url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)
    no-repeat
    left center;
  padding: 5px 0 5px 25px;
    }

source: https://css-tricks.com/data-uris/

Use finish-loading detector

use jQuery(window).load for the page

$( "#book" ).load(function() {
 // Handler for .load() called.
});

Diffrence between ready and load is poseted in this post: Detect if page has finished loading

DOMContentLoaded: When the DOM is ready to be manipulated. jQuery's way of capturing this event is with jQuery(document).ready(function () {});.

OnLoad: When the DOM is ready and all assets - this includes images, iframe, fonts, etc - have been loaded and the spinning wheel / hour class disappear. jQuery's way of capturing this event is the above mentioned jQuery(window).load.

see also: http://api.jquery.com/load-event/

How to make a preloader with a gif before the page load?

3 Answers3

Converting Gif image to base64 and implementing in HTML

Use finish-loading detector