How to display a loading progress bar when jQuery function is executing?

Question

We want to show a loading progress bar when jQuery code is being executed, however the progress bar is shown after the jQuery code has executed.

<div id="loading">
  <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>

$(window).load(function() {
  $('#loading').hide();
});

$("[id*=btnAddCa_Cl]").click(function() {

  var ttlCationCaco3 = $("input[id$='txtTdsAdjustmentForCation']").val();
  if (parseFloat(ttlCationCaco3) > 0) {
    $("input[id$='txtCalciumPpmAsCaCO3']").val(parseFloat($("input[id$='txtTdsAdjustmentForCation']").val()) + parseFloat($("input[id$='txtCalciumPpmAsCaCO3']").val()));
    $("input[id$='txtCalciumPpmAsCaCO3']").trigger('keyup');
  } else {
    $("input[id$='txtChloridePpmAsCaCO3']").val(parseFloat($("input[id$='txtTdsAdjustmentForAnion']").val()) + parseFloat($("input[id$='txtChloridePpmAsCaCO3']").val()));
    $("input[id$='txtChloridePpmAsCaCO3']").trigger('keyup');
  }

});

The JS code you've shown doesn't seem to do anything with the progress bar, except hide it on load...? Also, unless you're making a lengthy async operation (ie. 1 second+) a loading bar is rather moot. — Rory McCrossan
– Rory McCrossan, Commented Dec 3, 2019 at 8:37
What you're asking still makes no sense. There is no "jquery function executing" and your image still shows when the page loads. stackoverflow.com/questions/59068461/… — fdomn-m
– fdomn-m, Commented Dec 3, 2019 at 8:54
@RoryMcCrossan the values are getting calculated on the jquery event of button click. It takes more than 30-40 secs to calculate as it involves calculating values for 15-20 text boxes using various formulae — Ion IT
– Ion IT, Commented Dec 3, 2019 at 8:59
Also, do you mean that you just want to show a single loading spinner graphic or a progress bar? The two are very different things. — Rory McCrossan
– Rory McCrossan, Commented Dec 3, 2019 at 9:04
The link above is to an identical question, word for word. — fdomn-m
– fdomn-m, Commented Dec 3, 2019 at 10:01

Rory McCrossan · Accepted Answer · 2020-04-19 14:47:05Z

2

From the comments under the question it appears that you want the loading spinner graphic (note: not a progress bar, the two are very different in behaviour) to appear while your long-running chemistry-related calculations run.

The issue you have here is that the calculations are a synchronous process and prevent the DOM from being updated while they are in process. To fix this you could place the calculation logic inside a timeout with a very short delay in order to give the DOM some time to update and not block the UI from being amended. As such, try this:

let $loading = $('#loading');
let $calcPpmAsCao3 = $("input[id$='txtCalciumPpmAsCaCO3']");
let $chloridePpmAsCao3 = $("input[id$='txtChloridePpmAsCaCO3']");

let ttlCationCaco3 = parseFloat($("input[id$='txtTdsAdjustmentForCation']").val());
let ttlAnionCaco3 = parseFloat($("input[id$='txtTdsAdjustmentForAnion']").val());


$("[id*=btnAddCa_Cl]").click(function() {
  $loading.show();

  setTimeout(function() {
    // calculation logic here \/ \/ \/        

    if (ttlCationCaco3 > 0) {
      $calcPpmAsCao3.val(function(i, v) {
        return parseFloat(this.value) + ttlCationCaco3;
      }).trigger('keyup');
    } else {
      $chloridePpmAsCao3.val(function(i, v) {
        return parseFloat(this.value) + ttlAnionCaco3;
      }).trigger('keyup');
    }

    // calculation logic here /\ /\ /\        

    $loading.hide();
  }, 10);
});

#loading {
  display: none;
}

There's a couple of things to note in this example. Firstly accessing the DOM is one of (relatively) slowest things you can do in JS. As such it's worth taking steps to reduce the number of times you do it. If you need to refer to an element multiple times, 'cache' it in a variable.

Also, call parseFloat() on a value once and store it in a variable. Then you don't need to keep calling parseFloat() on something which you already had access to.

Lastly, I used CSS to hide #loading by default. Don't do this in JS as the element will be visible for a split second before the JS runs and hides it. CSS executes first and is quicker, so it avoids this issue.

edited Apr 19, 2020 at 14:47

answered Dec 3, 2019 at 9:38

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Max Over a year ago

getting Uncaught ReferenceError: $ is not defined

Rory McCrossan Over a year ago

@Max If you're referring to the snippet in the question I removed it as it wouldn't work as it relied on the OPs imagery. If you're referring to your own code then you need to include jquery.js in the page. I would also appreciate it if you removed your downvote.

Barbz_YHOOL Over a year ago

this also helped me in php haha, my issue was that i was putting the $loading.hide(); outside the setTimeout function

Collectives™ on Stack Overflow

How to display a loading progress bar when jQuery function is executing?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related