Loading animation

Question

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

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>

right after the tag body has this div who does the animation loading.

php script.

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

My question is this: Why when I change . ready to . load the animation becomes infinite? And because before loading all the images the animation disappears?

Answer 1

The problem is that the document doesn’t have an event load, only the 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>
<div id="preload" class="preload"></div>

As for your doubt about loading the images, the animation has a set time, passed as a parameter to the function fadeOut(). When the page loads, the animation is executed at the set time. If you want more time, increase the value of the 1000(time in ms) for desired quantity.

EDITION

Starting from version 3.0 of jQuery, there was a change. Instead of using window.load(), it is necessary to use window.on('load',function () { //... }