How would one go about staying on the CURRENT page until the NEXT page is fully loaded.
I've experimented with stuff like making the body
<body style='display: none'>
And then displaying it with Jquery upon full load but that's not what I'm looking for.
I would like for the user to stay on the current page (probably display a loader graphic BUT keeping the content of the current page - no blank pages etc) while the next loads and then.... BAM you pop the full page for display. Otherwise the page jumps around as it loads.
all tutorials or plugins do either the above or some like http://github.hubspot.com/pace/docs/welcome/ show a loading bar on the NEXT page while it's being fully loaded... but this still lets you see the elements jump around.
YOUTUBE has this (same as pace above) BUT it stays on the CURRENT page, shows the loader and then moves on to the next whereas pace goes to the next page and then shows a loader while the rest of the page gets loaded.
I hope I am making sense.
Thank you.
you need to use AJAX to load the page.
I think this is a good tutorial on how to do it: http://tutorialzine.com/2009/09/simple-ajax-website-jquery/
Related
The main achievement:
Load previous pages when going back from the detail product page to category/shop archive.
What I have done:
I have a WordPress/WooCommerce website where I have implemented lazy loading over shop/category pages through AJAX. Also, once the next page is loaded, the application updates the browser's URL with the pushState() method.
Case study:
Imagine you visit example.com/shop, and you scroll down. When you reach the footer, the next page is lazy loaded through AJAX and the browser's URL updates to example.com/shop/page/2. Once on page number two, you click on a product (example.com/product/lorem-ipsum), read the details, and see the pictures. Then you decide to go back by clicking the browser's back button. In that scenario, now you are back to the page example.com/shop/page/2, but the problem is that page one does not load on top of page two, so only the products of page two are showing. Once on page number two, can I automatically load the previous page/pages above the current page?
Real example:
If you visit the Nike website, you will see what I would like to achieve on my website. Please, load multiple pages scrolling down. Once done, click on a product and go back by clicking the browser's back button. Once the page is loaded again, you will appear in the exact place where you were before visiting the detail page, and you will see how the previous pages have been loaded on top of the product that has the focus (just the one you clicked).
What I have tried:
I have searched over the internet, and I haven't found anything. Maybe I do not know what to search. I have read that the window popstate event is fired when you click the back/forward button. I have tried to use this event to run some tests, but I have failed. I'm lost :(
Can you help me, please? Thanks in advance.
My manager asked me to try replicating the sliding feature here at this website:
https://insight.bakermckenzie.com/blockchains-and-laws
The navigator arrows at the right and left of the page direct the user to other pages of the site, but do so much like a carousel rather than simply opening the link in the traditional way. Even hitting the browser's "back/forward" buttons makes the site slide between the pages rather than opening them normally.
I've dug through the source code and used the developer tools, but can't find out how exactly the site is pulling this off. Any ideas? Seems like it could be JavaScript, but I'm not too sure.
I couldn't find the library that the site uses, but I'll try to explain it.
When you request a 'new page', by clicking on the arrows or the menu, all the content is loaded async. If you pay attention to the .page-container div, you can see that when you 'change' the page, the div with the content you are currently seeing moves to the side and then is completed removed from the page.
Step-by-step:
Request a page
New content loads into a div that is not visible yet.
The page you currently are moves to the side and then its content is removed when is completely hidden from the view (the whole html is deleted) .
The 'new page' that was requested follows the 'old' page movement.
It is like a carousel, but the new content is loaded async and the old one is removed.
Div responsible for the content
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.
There's a page that has infinite scroll and it loads the next page when you scroll to the bottom of the current page, like twitter and facebook.
I want to force the page to load several pages instead of just one every time I reach the bottom.
I see in chrome's console that something new pops up into the elements and then disappear almost immediately. I managed to capture some of that element before it disappeared: <iframe class="hidden_elem" name="transport_frame_9" src="/ajax/pagelet/...
, The number in transport_frame_9 increases on every load.
Also I tried to look in the <script> tags of the page for clues but couldn't find anything useful.
Is it even possible to invoke this script to load several pages? Or maybe there's a way to fool the page to think I reached the bottom several times? Like setting a some scrolledToBottom property to true?
Facebook has two ways to display somebody's timeline: starting from the very top, showing the full banner, and semi-scrolled, so the banner is cut in half and the profile picture is very close to he floating navigation.
However, the semi-scrolled state seems very natural, there is no delay. The page does not suddenly jump when the content is loaded.
How is this feature implemented in general? Simple window.scroll seems not to be cutting it as it's too slow (has to wait for the content to load to actually have something to scroll) and rather hinders user experience.
You assume in your question the initial loading of the page. That assumption is wrong, because the "page", so to speak, is already loaded.
When you are visiting one facebook page, and then navigate to someone's timeline, it's not a full page refresh in the browser, switching from one page to another. Rather, it's all done via ajax. The "previous" page is not really unloaded by the browser, and the "next" page is loaded via ajax.
As for the url changing, that's a different topic (history pushState).