0

Situation:
I am looking for a jquery/ajax loader and found this thread helpful.
Now I am using this fiddle as my loader.
Everything works fine but I only have one concern.
Below the js code, 'responseTime' is fixed to 2.5 secs. 

$.mockjax({ url: "/mockjax", responseTime: 2500 });

So if my page loads more than 5 secs, the loader only runs at 2.5 secs.

Question:
How am I going to depend the loader's time to my page's unpredictable loading time?

Your help is very much appreciated. Thanks!

Jordan Kasper
  • 13,153
  • 3
  • 36
  • 55
Jorz
  • 358
  • 5
  • 22

2 Answers2

0

You can show loader gif until window loads completely by 

$(window).load(function(){

}

And do it like:

$(window).load(function(){
    $('#cover').fadeOut(1000); 
});
#cover {
    background: url("http://www.aveva.com/Images/ajax-loader.gif") no-repeat scroll center center #FFF;
    position: absolute;
    height: 100%;
    width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="cover"></div>
<img src="https://i.ytimg.com/vi/lklDJ5VRQao/maxresdefault.jpg" />

It will start with showing gif and will be faded out once content gets loaded completely.

Ambrish Pathak
  • 3,813
  • 2
  • 15
  • 30
  • I tried your code but found out the loader only works when my PHP/SQL script behind are done. I'm looking for something that when my script starts to run, the loader also starts and ends as the script ends. – Jorz May 17 '17 at 06:42
  • Are you trying to show loader gif during some ajax call or until a webpage loads completely ? – Ambrish Pathak May 17 '17 at 06:52
0


I found what I'm looking for from this site.

Below is the code I use.

$(document).ready(function(){
    $("#spinner").bind("ajaxSend", function() {
        $(this).show();
    }).bind("ajaxStop", function() {
        $(this).hide();
    }).bind("ajaxError", function() {
        $(this).hide();
    });
 
    $('#button-upload').click(function() {
        $('#spinner').show();
    });
 });
.spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
    text-align:center;
    z-index:1234;
    overflow: auto;
    width: 100px;
    height: 102px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="spinner" class="spinner" style="display:none;">
    <img id="img-spinner" src="http://sampsonresume.com/labs/pIkfp.gif" alt="Loading"/>
</div>


<input type = "submit" value = "Upload" id="button-upload" />

The loader is indefinite in this snippet, but it runs perfectly on my site.
Thanks guys for the help anyway =)

Jorz
  • 358
  • 5
  • 22