Show Body loading before DOM is ready . i have already used preloader but still body show before DOM is ready

Question

the loader shows after the screen deflection and then complete body shows. the jquery code takes time to load the complete body. I have tried all things but all in vain.

$(window).load(function () {
        
                $(".preload").fadeOut(2000, function () {
                    $(".profile").fadeIn(1000);
                });
           
            });

.preload {
                width: 50px;
                height: 50px;
                position: fixed;
                top: 50%;
                left: 50%;
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="preload">
            <img src="http://i.imgur.com/KUJoe.gif">
        </div>

if you want your code to execute before DOM ready, the `` in `head` tag and see — Aravind S, Aug 06 '18 at 05:45
Do it but still screen loads before the preloader how to get rid of it .. — HassanIrfan, Aug 06 '18 at 05:55
from https://stackoverflow.com/questions/4584373/difference-between-window-load-and-document-ready-functions : `window.onload` fires later (or at the same time in the worst/failing cases) when images and such are loaded. the problem you will run into without it, however ; is that your preloader won't be guaranteed to be in the DOM either. — Timothy Groote, Aug 06 '18 at 09:20

score 0 · Accepted Answer · answered Aug 06 '18 at 09:18

$('#mySpinner').addClass('spinner');
$(window).on("load", function(){
  setTimeout(function(){
    $('#mySpinner').remove();
  },2000)
  
})

#mySpinner{
  width:100%;
  height:100%;
  position:fixed;
  z-index:999;
  background:#fff;
  left:0;
  top:0;
}

@keyframes spinner {
from {transform:rotate(0deg);}
to {transform: rotate(360deg);}
}
.spinner:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  margin-left: -15px;
  border-radius: 50%;
  border: 1px solid #ccc;
  border-top-color: #07d;
  animation: spinner .6s linear infinite;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mySpinner">

</div>
<img src="https://picsum.photos/450">
<img src="https://picsum.photos/450">
<img src="https://picsum.photos/450">
<img src="https://picsum.photos/450">

It is pure css preloader, u can add delay(setTimeout function) so that preloader is removed/hide when you want

Show Body loading before DOM is ready . i have already used preloader but still body show before DOM is ready

1 Answers1