I have a PHP based website.
I have used service-workers and manifest.json to convert the website into a PWA.
Now when I launch the PWA from my Homescreen, it works normally like an APP. But, the problem is that since PWAs does not show browser address bar, user has no way of knowing that the page is being reloaded or the next page is being loaded. When they click something next page gets loaded but no loading indicator is shown.
So, now i need to add loading animation while navigating between pages. As all pages are at different URL and their is no master frame.
I'm not able to figure out some solution.
Theory
What you need to do is to show a loading animation at two times in a page's life cycle: at startup and before closing down. If you do that, first page's closing animation will take user to second page's starting animation, and user will be informed by the state of the app.
Practice
1) Starting animation
I think document.ready event of jQuery is a good time to let the user to interact with the page. So the loading animation will be active/shown when the page is loaded. And you will end the animation once the page is loaded and ready for user interaction.
The .ready() method offers a way to run JavaScript code as soon as the
page's Document Object Model (DOM) becomes safe to manipulate. This
will often be a good time to perform tasks that are needed before the
user views or interacts with the page, for example to add event
handlers and initialize plugins.
2) Ending animation
For this, I use onbeforeunload event of the browser.
The beforeunload event is fired when the window, the document and its
resources are about to be unloaded.
onbeforeunload fires automatically when user clicks to a link or otherwise triggers a navigation process. So just by listening to that, you can start your ending animation.
Then ending animation will start as the user triggers a navigation, and will be welcomed by the starting animation of the next page. So there will be transition starting with a user click and ending with next page loading. Just like apps do.
The code
Here's a snippet from the code I normally use;
$(function () {
// page is loaded, it is safe to hide loading animation
$('#loading-bg').hide();
$('#loading-image').hide();
$(window).on('beforeunload', function () {
// user has triggered a navigation, show the loading animation
$('#loading-bg').show();
$('#loading-image').show();
});
});
Here's a fiddle also with complete styles and HTML
Hope that helps.
Related
I think this question was asked in a similar form before but I didn't get a clear understanding how to implement it properly.
I have a site, which has different pages on their own urls, like '/contact', '/about', '/products'.
What's the technique to put a top bar on the top like this one http://nanobar.jacoborus.codes/?
Here is what I need:
User clicks a link on the page.
JavaScript handles the click, shows the progress bar, starts growing it then passes the event to browser.
Browser starts loading the page. At this moment, page clears and becomes white and blank.
As the progress bar was in some position that is not zero, say, 63%, and now there is no information on the new page about where it was.
So, I can technically run some function on every page, like showGrowingProgressBar(value), but since I don't know where it left, I cannot put it in the same progress state as where it left.
How do I make it look natural, like the user didn't leave the page, but more like an SPA experience?
I guess you want to build an one page web application where things load in the same page without refreshing.
You can use AJAX to do this. you can populate a particular div with the new html without refreshing.
It can be handled more easily using Angular JS. You can define routes for every page and can also have templates for different page, and can load that template when user clicks on the link. It will just replace the container div with new html codes and you can also handle the urls easily.
Turbolinks seems to be what you are looking for. It dynamically loads your pages and shows a loading indicator.
Turbolinks makes navigating your web application faster. Get the performance benefits of a single-page application without the added complexity of a client-side JavaScript framework. Use HTML to render your views on the server side and link to pages as usual. When you follow a link, Turbolinks automatically fetches the page, swaps in its , and merges its , all without incurring the cost of a full page load.
Your approach is:
User clicks a link on the page.
JavaScript handles the click, shows the progress bar, starts growing it then passes the event to browser.
Browser starts loading the page. At this moment, page clears and becomes white and blank.
As the progress bar was in some position that is not zero, say, 63%, and now there is no information on the new page about where it was
Your approach should be:
User clicks a link on the page.
JavaScript handles the click, browser starts loading the page. At this moment, page clears and becomes white and blank.
New page shows the progress bar, starts growing it then passes the event to browser. The growth can be picturized by the no. of API call completed divided by total no. of api calls, required for that page.
I have two different pages.
index.html
page2.html
I have a button on index.html which would take us to page2.html,
but its a direct transition. Where as I was looking for a fade in transition to happen when first page switches to second page.
I don't have to come back to first page so we don't need any transition from second to first.
Could anyone please help.
Thank you
There would be three ways to really make this happen. You can't transition from one page to another if the browser is loading the new page in the address bar besides using a fade out and a fade in on the new page. However, there are two other ways to get animation of page loads running. The first of which is completely inadvisable because it uses an iframe and can complicate communication between the frame and the page it's loaded on.
Here are the three algorithms:
Add a fade in animation on the "body" element when the pages first load and make all links on the pages trigger via javascript. When the Javascript navigate function is called, fade the page, and then execute the location change on the animation callback. Since all of the pages have a fadeIn, this would appear that the page is "transitioning".
(inadvisable) - iterate an ID and on each new request, load a hidden iframe above all of the content and give it the incremented ID. also before creating the frame apply an onLoad handler to the frame and make it animate the frame when it's loaded.
Use AJAX to load your content into a container and you can animate it based on when the ajax request starts and gets a response.
I assume you were looking for algorithms, not code samples. Hence the verbiage.
I have added AJAX to a client's site to enable some simple animation of page transitions. So if we navigate to his homepage (with js enabled) at firedogcreative.com and then navigate to his edit page, and then to one of his work pages; we end up with a history something like this:
firedogcreative.com --> firedogcreative.com/#edit --> firedogcreative.com/#example1
Ajax takes care of loading the content of each of those pages in, it updates the hash in the URL bar in each case, and all works exactly as planned.
When a user clicks the back button, though, I'm not sure I understand what is happening. If they are at #example1 and hit the browser's back button, the URL bar updates to firedogcreative.com/#edit, but the page content doesn't change. If the user then reloads the page, though, it correctly reloads to #edit.
I tried adding this, which I thought would cause the pages not to cache and thus each back button call would reload the page, but it didn't seem to have an effect:
window.onbeforeunload = function () {
// stuff do do before the window is unloaded here.
};
If that worked, it would be a passable solution. The page would only ever ACTUALLY reload when the user uses the forward/back buttons, which would be fine.
So my question is, what is going on with the back button? Shouldn't onbeforeunload be causing the backbutton to reload based on the stored URL?
So my question is, what is going on with the back button?
It is going back to the previous URL.
Since changing the fragment identifier to track application state is a hack, nothing else happens.
Shouldn't onbeforeunload be causing the backbutton to reload based on the stored URL?
No. You are navigating back within the same document, so it isn't being unloaded.
You need to monitor the hashchange event and change the application state with your own JS.
Alternatively, switch to using pushState and watch the popstate event.
I have a fancybox 2 .pdf loader working that loads into an iframe. Some PDFs take a little time to render before being sent and I wanted to use the spin.js spinner as a progress bar as the animation is loaded instead of the supplied .gif
i can start the animation up easily enough using the beforeShow event, but i can't see which event to trap when the object is returned from the server. i have tried all events in the documentation, but i can't see one that traps when the pdf is loaded.
you might need to stop the current event and tell it to execute the next function of hiding the spinner
not sure what the id of the spinner is but using jQuery you can
$('#spinner').stop(true,true).hide();
which should stop any current events and cut to the end so you can instantly start a new function on it
I have a pretty large form to develop and it could take some time to render (over 5 secs). Now to give the user an indication of something happening I'd like to fire up a lightbox with a simple "page loading" message whilst the rest of the page loads in the background. Once the page is fully loaded I can close the lightbox and the user can continue through the application. Now I know I shouldn't use window.onload to activate this as jQuery's document.ready is quicker and a better solution for this issue but does anyone have any advice on how to do this or if it's possible.
It is better to just add a semi-transparant div to the dom and and make it disappear onload.
Executing javascript-heavy functions (like the lightbox) kind of defeat the purpose of a waiting indicator.
Add a script in the head (after css is included) that opens the lightbox. Last in the body add a script (preferably with an event handler to know that the dom actually is ready) that closes the lightbox :)
document.addEventListener("DOMContentLoaded", function () {
//close lightbox
}, false);