Is it possible to adapt the following jQuery?

Question

I've recently added to my website, a responsive loading icon while the page loads. Except I would like to show the image whilst a JavaScript function is being executed because if the user runs the script a second time before the first xmlhttp request is finished, it wont work properly.

 $(window).load(function() { $(".se-pre-con").fadeOut("slow"); }); 

 .no-js #loader { display: none; } .js #loader { display: block; position: absolute; left: 100px; top: 0; } .se-pre-con { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url(images/loader-64x/Preloader_2.gif) center no-repeat #fff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="se-pre-con"></div> 

Is there a way of modifying the jQuery to work better for me? or do you guys have a completely different solution that will still solve the problem?

Answer 1

If you are using this for AJAX. Use following way to show/hide loader.

$(".se-pre-con").show(); // before initiate ajax call
$.ajax({
   url: "test.html",
   context: document.body
}).done(function() {
   $(".se-pre-con").hide();
});

Answer 2

Some light plugin (2kb) like https://github.com/jgerigmeyer/jquery-loading-overlay exist and can be used like this :

to start :

$('#target').loadingOverlay();

and to stop :

$('#target').loadingOverlay('remove');

Just put it in your function and don't forget to do a synchronous call or it will mean nothing :)

Answer 3

If I am understanding your requirements clearly then I think that You want to add a loading image before your xmlhttp request and when request work complete then it goes off.

first add below code in html file

<div id="loadingDiv">
    <div id="popupContact">

    </div>
</div>

following lines in your css and don't forget to add a bg.png image in your images folder which you want for your loading image

#loadingDiv {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
    position: fixed;
    background: url(../images/bg.png) repeat;
    overflow: auto;
    z-index: 100000;
}

div#popupContact {
    position: fixed;
    left: 48%;
    top: 40%;
    background: url(../images/loading.gif) no-repeat;
    width: 100%;
    height: 100%;
    float: left;
}

then add following two methods in your js file

//it will show process image
function showProcessImg(){
    $('#loadingDiv').css('display','block');
}
//it will hide process image
function hideProcessImg(){
    $('#loadingDiv').css('display','none');
}

call to showProcessImg() before your httprequest and call hideProcessImg() in your success or error call back of httprequest as following

showProcessImg();

    $.ajax({
        url:'',
        method:'POST',
        success:function(response){
            hideProcessImg();
        },
        error:function(){
            //disable loading image
            hideProcessImg();
            alert('Error occur here');
        }
    });

Answer 4

just create an overlay div and then toggle its display property.

heres a fiddle for it. Note no image needed, but youll need a css3 supporting browser.

#waiting-container {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1130;
  display: hide;
}

#waiting-container #waiting-spinner {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1132;
}

#waiting-spinner .spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 40px;
  width: 40px;
  margin: 0 auto;
  -webkit-animation: rotation .6s infinite linear;
  -moz-animation: rotation .6s infinite linear;
  -o-animation: rotation .6s infinite linear;
  animation: rotation .6s infinite linear;
  border-left: 6px solid rgba(0, 174, 239, .15);
  border-right: 6px solid rgba(0, 174, 239, .15);
  border-bottom: 6px solid rgba(0, 174, 239, .15);
  border-top: 6px solid rgba(0, 174, 239, .8);
  border-radius: 100%;
}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}
@-moz-keyframes rotation {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(359deg);
  }
}
@-o-keyframes rotation {
  from {
    -o-transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(359deg);
  }
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

#waiting-container #waiting-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: black;
  opacity: .5;
  z-index: 1131;
}

Answer 5

All the answers given here are good, but this is what you can try if you want the loader image by default for all AJAX requests:

 <body> </body> <div class="modalLoader"></div> 

 <script> $body = $("body"); $(document).on({ ajaxStart: function() { $body.addClass("loading");}, ajaxStop: function() { $body.removeClass("loading");} }); </script> 

 .modalLoader { display: none; position: fixed; z-index: 1500; top: 0; left: 0; height: 100%; width: 100%; background: rgba( 255, 255, 255, .8 ) url('../img/loaders/loader.gif') 50% 50% no-repeat; } body.loading { overflow: hidden; } body.loading .modalLoader { display: block; } 

Thanks