How to place a gif before displaying the site page

Question

I would like to put a gif of loading on my website. When I access the page before opening the site, I would first open the gif and stay for 1.5 seconds or so. This is possible?

Note: I want something like this http://ivang-design.com/chronos/videoyt/

Answer 1

Doing this is extremely simple and can be done for as long as 1.5 seconds, or just disappear when you finish charging.

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

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

The setTimeout event defines that after the time "1500" millisigundos = 1.5 seconds, the image will disappear. For declaring that the object (by its id) "Loader" receives the style method, which has the display parameter with its attribute 'None', which is invisible.

Or for the same shipment:

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

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

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

Answer 2

The plugin you want is the Royal Pre Loader.

One tip I give is to search the code of the site, in my case I use Chrome, I enter in Dev Tools, I go to the Source tab and look in the Javascript related folders, in your case it is in the folder "/js".

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

Answer 3

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);
}

Answer 4

There is an option on JQuery very simple.
Using the examples already cited:

JQUERY

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

When the page is completely "read" the div will disappear. The fadeOut(100) will cause the div disappear "smoothly" in 100 milliseconds. See more about the fadeOut here: http://api.jquery.com/fadeout/

The count of setTimeout 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;
}

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

HTML

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

See the result here: http://jsfiddle.net/SamirChaves/6ns0grm0/2/