Home/ Questions/Q 6778905
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T16:19:19+00:00

Please bear with me as I am a newbie when it comes to JQuery

  • 0

Please bear with me as I am a newbie when it comes to JQuery and AJAX. I’ll try to explain what I need in details.

I have a page with a link that redirect to another page on the same domain. What I wanted to do are as follow, in the order that I wrote it.

  1. Trigger ‘Please wait while page is loading’ overlay on the page when the link is clicked
  2. Retain the overlay until the fetched page is fully loaded and then remove it

I assumed that as soon as the page is fetched and loaded, the overlay from the previous page will no longer be visible/valid. But how or when do I create an overlay on the fetched page?

I know that I can use $(document).ready to remove the new overlay on the new page but I am having some difficulties in creating the overlay on the fetched page. In short, how and where do I put the JQuery code to create the overlay on the page so that its triggered before the page is fully loaded. Hope this is not too confusing.

Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you want an overlay on the newly fetched page to be initially visible, then you have to build that overlay into the initial HTML/CSS of the new page. You can then use javascript in $(document).ready() to remove the overlay. You have to do it this way because you cannot run javascript that manipulates the DOM in the new page until it’s fully loaded. It will typically be partially or fully visible before you can run this javascript. So, if you want the initial state that shows in the new page to have the overlay, then you have to bake the overlay right into the HTML/CSS of the new page so as it comes up, that’s how it displays.

    Then, when it loads successfully and the DOM is fully loaded, your code in $(document).ready() will fire which will then remove the overlay.

    For the original page, you can just put up an overlay as soon as the button/link is clicked. It probably won’t stay visible for long as the browser clears the window to prepare for the next page load.

    The only way to seamlessly have an overlay up during the entire process without ever seeing the window clear would be to not every actually load a new page URL. Instead, you’d have to fetch the new content with Ajax and use Javascript to put it into place below the overlay. This, of course, would not result in the URL in the URL bar changing, but would get you the continuous overlay behavior.

    • 0