How to remove a class from a link once the target page has loaded

While setting up a small Woocommerce website with the default Storefront theme, I noticed that the Checkout page loads particularly slow when compared to the rest of the website. I will eventually find a way to let it load faster but I am afraid that this is a general, widespread issue, more or less. Now, The main problem to me is that customers have no hint about what is going on, and they are bound to believe that the system has frozen somehow.
So, I decided to show a loader when the Checkout button is clicked from the Cart page.
At first I added:

jQuery( ‘a.checkout-button’ ).on( ‘click’, function(){
jQuery(this).addClass(‘loading’);
});

at the end of the Cart page but, in order to avoid possible issues with jquery (I am not a tech person and I am pleased to avoid tech challenges), I changed that into plain javascript

document.querySelector(“a.checkout-button”).addEventListener(‘click’, function () {
this.classList.add(‘loading’);
});

The code works but, if somebody hits the back arrow when at the Checkout (i.e. in order to delete an item, change quantity,…) s/he finds the Cart page with the loader still spinning.

What should I do, please, to tell the system that, once the Checkout page has loaded, the loader on the Cart page should be stopped? I cannot guess what kind of code… Maybe something like

document.querySelector(“a.checkout-button”).XXXXXXXXXXXX(‘YYYYYYY’, function () {
this.classList.remove(‘loading’);
});

but I cannot find the event to trigger….

Thank you!

Read more here:: How to remove a class from a link once the target page has loaded

Leave a Reply

Your email address will not be published. Required fields are marked *