Page preloader before page load jquery

Question

I am totally new in jQuery. I am trying to show a loader before all my page content is ready.

<script>
$(document).ready(function(){
    $(document).ajaxStart(function(){
        console.log('wait');
        $("#wait").css("display", "block").show();
    });
    $(document).ajaxComplete(function(){
        $("#wait").css("display", "none").hide();
    });
});

and in body i have this,

<div id="wait" style="display:none;position:absolute;top:20%;left:50%;"><img src="{{ asset('assets/global/img/ajax-loader.gif') }}" /></div>

but no loader is displayed and no error shows in console. Can anyone give me any solution or example regarding this?

Thank in advance!

Answer 1

Check Demo Code Below.

 $(document).ready(function(){ $('#loader').fadeOut(showBodyPart); function showBodyPart(){ $('#body_parts').fadeIn(300); } })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="loader"> <img src="http://i.imgur.com/KUJoe.gif" id="a" alt="Loading" /> Loading... </div> <div id="body_parts" style="display: none;"> <p>If you click on me, I will disappear.</p> <p>Click me away!</p> <p>Click me too!</p> </div>

Answer 2

With Bootstrap 4, Jquery, CSS

<style>
 .overlay {
    position: absolute; background-color: white; top: 0; bottom: 0; left: 0; right: 0; margin: auto; z-index: 10;
}
    .overlay div{ position: relative; z-index: 10; top:30%; left: 50%;}
</style>

HTML

<body>
<div class="overlay">
    <div class="spinner-border text-secondary" >
        <span class="sr-only">Loading...</span>
    </div>
</div>

<div> Helloo World</div>
</body>

JQuery

<script>
$(window).on('load', function(){
    $( ".overlay" ).fadeOut(100, function() {
        $( ".overlay" ).remove();
    });
});
</script>

Page preloader before page load jquery

Question

2 answers

solution1
1 ACCPTED 2018-05-03 09:35:39

solution2
0 2022-09-12 06:01:08

Page preloader before page load jquery

Question

2 answers

solution1 1 ACCPTED 2018-05-03 09:35:39

solution2 0 2022-09-12 06:01:08

solution1
1 ACCPTED 2018-05-03 09:35:39

solution2
0 2022-09-12 06:01:08