AJAX loading img

Question

I am new to AJAX/Jquery, what is the best way to put a loading img while the page is is still on load ?

here is my code:

<div class="container">
        <div class="row">
            <div class="col-lg-12">
            <button class="btn btn-info btn-lg">Load More Page...</button>
            </div>
        </div>
    </div>


<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("#box").load("page2.php");
    });
});
</script>

Please check below link http://stackoverflow.com/questions/1964839/how-can-i-create-a-please-wait-loading-animation-using-jquery — user2960398, Aug 11 '16 at 10:19

score 0 · Answer 1 · edited May 23 '17 at 12:14

0

Please check below link

There is example

How can I create a "Please Wait, Loading..." animation using jQuery?

edited May 23 '17 at 12:14

Community

1
1

answered Aug 11 '16 at 10:21

user2960398

363
4
19

score 0 · Answer 2 · answered Aug 11 '16 at 10:23

You can simply use ajax- methods like ajaxStart, ajaxStop

Javascript code:

$(document).ready(function(){
    $(document).ajaxStop(function(){
        $('#loadingIndicator').hide(500);
    });
    $( document ).ajaxStart(function() {
        $('#loadingIndicator').show();
    });
}

HTML code:

<div id="loadingIndicator" style="display:none;z-index:100;">
    <img src="loading-big.gif" alt="" />
</div>

AJAX loading img

2 Answers2