Is there an event raised, after going to an page via the browsers back button?
Reason: I have a mobile website which shows an loading animation after clicking on a certain link. If the visitor later goes back to this page with the back button, the animation still blocks the whole ui.
I don't know of an event like what you're looking for. 🤔
A few other options could solve your problem, though.
You could set a unique value in localstorage, and check for it on document ready. If it exists, then hide/turn off your loading animation.
Set it when you start the animation:
window.localStorage.setItem('loadingAnimationStarted', 'true');
Check for your item on document ready:
document.addEventListener('DOMContentLoaded', function(){
if(localStorage.getItem('loadingAnimationStarted') === 'true') {
stopAnimation();
}
}
You could also have the loading animation be turned off when the user navigates away from the page in the first place using the beforeunload event.
Or, you could also tie the loading animation to the completion of a custom event, or promise depending on what is happening behind the scenes.
You probably set the loading animation while the user is waiting for the page to load correct?
If the user clicks back, he will be redirected to the previous page, which is cached in the client's browser. That's probably why you don't see the loading animation at all, which is good.
If you have different condition that shows the loading animation, maybe consider to change it accordingly to your purpose.
Related
I am building a website whose main component is a slideshow that is in the background of the whole site. Its image and description are on a timer so they change every couple of seconds.
The problem is that when the user leaves the site for a long enough time, the timer is still running, but the content is not present anymore, so when they navigate back to the page, it tries to catch up to the timer and it goes through the slideshow very quickly until it gets to the right state.
My current (very simple) solution for this is that I am cheching if the document is in focus before going to the next slide:
//- show next slide
function nextSlide() {
if (!document.hasFocus()) return
...
The problem with this solution is that if there are multiple windows on the screen and the page is not in focus, then the slideshow won't play, which isn't the intended bahaviour.
My question is: is there any JavaScript event that I can rely on to be called when the document is unloaded but the scripts are still running (if that even is what is happening here), so I can stop the timer and start it again when the user navigates to the site?
Edit: when I said "leaving the site", I meant leaving the tab or switching to another window so the site loses focus.
Link to the site: https://dev.jazzpuntbigband.com
So, I fixed my own issue. Turns out all I had to do was follow this guide from MDN Web Docs.
Question: With Javascript, can you tell the web browser to begin loading a page, but don't begin rendering it yet?
Issue: A client wants his web page to show listings like a book. When you click on the next button, he doesn't want the next page to immediately load. He wants the book to close (a closing animation) and then load the next page.
Current status: All links go to Javascript. I show the closing animation. Then, I replace the window location. The issue is that there is a clear wait for the next page to load. It would be nice if I could load the following page into cache while the closing animation runs. In other words, I want to make that three-second animation useful time by loading all the HTML, CSS, Javascript, and images for the following page and then all that happens when I set the new location is that it renders.
Possible solution: I have the main page that had two full-screen iframes in it. One iframe is the current page. The other is hidden and is used to load the next page. After the animation, I flip which iframs is visible and which isn't. This is good except that the back button doesn't work properly. If you click back, you go to wherever you were before you went to the website. You don't hide the current iframe and show the one you just hid. If you click back twice, flipping iframes doesn't work. I have to keep a log of your history. Further, I have to hack the back button, which I don't like. So, I'd like to use a built-in cache method if I can.
Possible solution: I have the main page that had two full-screen iframes in it. One iframe is the current page. The other is hidden and
is used to load the next page. After the animation, I flip which iframes is visible and which isn't.
Yes, this sounds like a good approach.
This is good except that the back button doesn't work properly. [...]
I have to hack the back button, which I don't like.
Single Page Applications (SPAs) can't use the back button as originally intended because the entire application exists within a single document.
Partly in response to this, we have
history.pushState()
which is a really good extension to the History API, enabling new "artificial" entries (describing new states) to be added to the browser's history, which, in turn, enables the back button to work exactly as the user might expect it to.
Further Reading:
http://html5doctor.com/history-api/
https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
I'm working on a site that provides web access to to legacy data.
The basic flow is for the user to select a query form from a menu, fill out the form, and submit it. The server generates the appropriate HTML and returns it to the browser. So far, so good.
Some reports can take some time to generate. For those reports I display a "processing" indicator when the form is submitted. This indicator is a normally hidden <div> containing an animated icon.
The problem comes when a user uses the browser's Back button to return to the query form. When the browser re-displays the page with the query form, the processing indicator is still visible. The only way to get rid of it seems to be to refresh the page at that point.
Is there any way to hide it after the Back?
You could set a JavaScript event to automatically remove the indicator after the page loads. That way, the indicator won't display unless the script later tells the indicator to show. In order to avoid never displaying the indicator, you could place the code that displays the indicator after the event that automatically hides it, both occurring on the page loading.
I finally have a solution for this that is working well enough in this application.
Some browsers, like Firefox, fire a document.focus event when the page is re-displayed. Others, like Safari, fire a window.popstate event instead.
I now hook both of these events and it works as expected 99.9% of the time.
As far as I could find, you should be able to use pageshow window event:
The pageshow event is sent to a Window when the browser displays the window's document due to navigation.
This includes:
Initially loading the page
Navigating to the page from another page in the same window or tab
Restoring a frozen page on mobile OSes
Returning to the page using the browser's forward or back buttons
<!DOCTYPE html>
<script>
window.addEventListener("load", console.log);
window.addEventListener("pageshow", console.log);
</script>
<p><a href="https://html.spec.whatwg.org/multipage/">Navigate
away</a> (then come "Back")</p>
See also:
Can I use "pageshow"?
I have a JS single-page app that uses the history API. A user lands on my page and navigates around, and a bunch of pushStates and replaceStates happen under the hood. All of the transitions happen in JS, no page reload happens. My question is that how can I detect if the user is back on the first location within my own app, that is, one more back button press will cause the browser to reload the previous page the user was on?
Thanks in advance!
You can detect the transition with hooking on onpopstate event and checking, where the user actually navigates:
https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate
Note however that if you'll try to stop such transition, this may be hard to do:
how to stop browser back button using javascript
You could use something like:
if(window.location == <the url of the root) {
//Do stuff here
}
A customer's site we show in an iFrame is extremely slow (~7s).
We can only provide a JavaScript file the customer will include, but he won't do more than that.
Is it possible for me to hook to all events (forms submitted, links clicked) and display a nice loading animation until the page is fully loaded?
Or can I universally ajax-ify his site?
Once your page is unloaded and the other page starts loading, the code from the original page is no longer available or running so it can't be doing anything and the content from the original page has been cleared so it can't be showing anything.
In that same situation, the next page is in the process of being loaded and it's code is not yet running.
Thus, you cannot use normal page javascript to run something throughout the loading of a new page. To do something like this, you would either have to use frames with progress showing in one frame while content loading in another frame or perhaps use a browser plug-in.
You can know when a page is being unloaded with the beforeunload event, but as soon as the next page starts to load, any code assigned to this will no longer be running and the current document will have been cleared.