How to put a gif before displaying the page of the site

There is an option in JQuery very simple. Using the examples already mentioned:

JQUERY

$(document).ready(function() {
  setTimeout('
              $("#preload").fadeOut(100);
  ', 1500);
});

When the page is completely "read" the div will disappear. The fadeOut(100) will cause div to disappear "smoothly" in 100 milliseconds. See more about fadeOut here: link

The count of setTimeout is also in milliseconds, so if you want 1.5 seconds, just multiply by 1000, in case 1500.

CSS

body {
  background: #cccccc;
}
.preload {
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  background-color: #fff;
  background-image: url('https://38.media.tumblr.com/bec5933eea5043acf6a37bb1394384ab/tumblr_meyfxzwXUc1rgpyeqo1_400.gif');
  background-size: 298px 298px;
  background-position: center;
  background-repeat: no-repeat;
}

No background-position just put center . The z-index: 99999 will cause div to always be above all other elements of the page as long as they have z-index less than "99999".

HTML

<div id="preload"></div>

See the result here: link

Doing this is extremely simple and can be done either by the time of 1.5 seconds, or just disappear when you finish loading.

<img src='loading.gif' id='loader'/>

<script>setTimeout(function(){ loader.style.display='none'; },1500);</script>

The setTimeout event defines that after the time "1500" milliseconds = 1.5 seconds, the image will disappear. For example, if you want to declare that the object (by its id) loader receives the style method, which has the display parameter with its 'none' attribute, which is invisible.

Or by the same upload:

<img src='loading.gif' id='loader'/>

<script>window.onload= function(){ loader.style.display='none'; }</script>

The window.onload event will perform the function assigned to it.

The plugin you want is the Royal Pre Loader.

A tip I give is to search the site code, in my case I use Chrome, I go to Dev Tools, go to the Source tab and search the Javascript related folders, in your case it's in the "/ js" .

Other browsers also have this feature to inspect elements, so whenever you find a different effect, first of all take a look at the site code.

Do without external resources and with a fade effect:

HTML

<div id="preload" class="preload"></div>

CSS

.preload{
    position: fixed;
    z-index:99999;
    top:0; left:0;
    width:100%; height:100%;
    opacity:1;
    background-color:#000;
    background-image:url('../images/721.gif');
    background-position:50% 50%;
    background-repeat:no-repeat;
}

JS

window.onload = function(){
    var div = document.getElementById('preload');
    preload(div, 50);
};
function preload(el, interval){
    var op = 1;
    var timer = setInterval(function () {
        if (op <= 0.1){
            clearInterval(timer);
            el.style.display = 'none';
            el.className = '';
        }
        el.style.opacity = op;
        op -= op * 0.1;
    }, interval);
}