Loading animation

Question

Loading animation

Navigation

#1 by (6 votes)

5

I have a code that does a loading animation before starting a page.

css.css

.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-image:url('https://media.giphy.com/media/ugEWbEMH0gm2c/giphy.gif');*/
    background-image:url('https://media.giphy.com/media/l4FGmQ3Ddqsp8LKKY/giphy.gif');
    background-size:70%;
    background-position:center;
    background-repeat:no-repeat;
}

index.php

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

script.php

<script>
  $(document).ready(function(){
        $("#preload").fadeOut(1000);
      });
</script>

My question is this: Why when I change the .ready to. load the animation gets infinite? And why before loading all the images does the animation disappear?

javascript jquery html5 css

asked by anonymous 03.07.2018 / 13:52

1 answer

What is Feature Driven Development (FDD)? Comparison of hours in Laravel

score 6 · Accepted Answer

The problem is that document does not have an event load , only window . See the snippet below.

$(window).on('load',function(){
        $('#preload').fadeOut(1000);
 });

.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-image:url('https://media.giphy.com/media/ugEWbEMH0gm2c/giphy.gif');*/
    background-image:url('https://media.giphy.com/media/l4FGmQ3Ddqsp8LKKY/giphy.gif');
    background-size:70%;
    background-position:center;
    background-repeat:no-repeat;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divid="preload" class="preload"></div>

As for your question about uploading images, the animation has a defined time, passed as a parameter to the fadeOut() function. When the page loads, the animation executes at the set time. If you want a longer time, increase the parameter value from 1000 (time in ms) to the desired amount.

EDITION

Since version 3.0 of jQuery , there has been a change. Instead of using window.load() , you must use window.on('load',function () { //... }