I'm trying to mimic the effect of a browser loading a page with jQuery. I have an ajax based navigation set up with HTML5 history, but I'm lacking of the feel of the page loading. Facebook seems to have done this. All the calls on the page are done with ajax, yet the browser does a loading effect as if it was loading a regular link.
How would this be done? Have an ajax based navigation system that mimics native browser loading?
Edit:
My question is probably not clear enough, so I'll provide an example:
When browsing a regular page, what happens when you click a regular link the browser (let's use Firefox, because browsers behave differently..):
The tab title changes to "Connecting.."
The favicon changes to a spinner
The lower left popup displays "Loading/reading/waiting [link]" when it loads images, javascript files etc.
So everything above is what I consider native link click behaviour. Is there any way to mimic it (and not by changing the title or favicon temporarily)
Edit2:
This mimicking works somehow on Facebook. Using Firebug and navigating around, you can clearly see that the page doesn't change, yet the browser does the native loading stuff like changing the favicon to spinner, tab title changes to Connecting etc. The URL is rewritten with HTML5 history and the content is retrieved via /ajax/home/generic.php?ajaxpipe=1... How do they do that?....
Related
I was browsing this website https://amaioswim.com/
and I did notice that when clicking on the navigation on the left side, the url address change instantly.
They also use a "fade out" and "Fade in" curtain to make the transition between pages seamless.
I'm wondering what kind of approach would you use to achieve this.
I know with JS you can change url, but only hashtags url... right?
or is it because they have a super fast server with 0 latency?
do you think they are loading everything ajax-ly in a same dvi container?
Thanks
This has little to do with the history API. (They are using that API to update the displayed URL, but that's a minor detail in how the site works; on its own it wouldn't create this behavior.)
This particular site is running a clientside framework. (I'm not seeing any obvious clues in the minified code as to which one.)
Links within the site are handled as AJAX requests. They're using the same endpoints for fresh page loads and for XHR calls, and are checking the X-Requested-With header to determine whether to send the full server-rendered HTML file (including the framework for the full site) or just the content for that particular page (which will be embedded clientside in the already loaded site.)
As evidence: this returns the full site (as when a user first visits that URL):
curl 'https://amaioswim.com/about'
This returns just the "about" content (as when a user clicks the "about" link after loading the site):
curl 'https://amaioswim.com/about' -H 'X-Requested-With: XMLHttpRequest'
(You can also see this by viewing the Network panel in the browser console while navigating the site.)
Loading just the content for an individual page is, of course, much faster than loading the entire page HTML (and its CSS and JS), and allows you to add glossy effects like crossfades and animations while the AJAX call is in progress.
Since some years you can use the html5 history api:
https://css-tricks.com/using-the-html5-history-api/
It will allow you to manipulate the url quite freely.
For example when you scroll to a new section you can put that section at the end of the browser url.
That's history API in action. Find more details here
Try the pushState and replaceState methods, that should get you this behavior. To have more precise control over these, you might also want to take a look at popState event
Normally if you click a link the browser displays a little loading icon up in the tab until the page complete loading .
Is there any way to prevent the browser from displaying this little icon in the tab especially when dealing with iframes loading ?
Not directly, but you can design your website as a single page application. Implement your internal links with Javascript handlers which load the content with XMLHttpRequest and replace the current content when the response arrives.
Keep in mind that this makes your content practically invisible to search engines and breaks many browser navigation features your users will be used to.
You could write to the document via JavaScript after it has finished loading by using document.onload
I'm currently working on the web-site using Polymer, Jekyll and Github pages. But I'm facing one big issue. When switching between pages there is a white screen showing every time, which is not correct behavior. I would like to always see the header section and left menu (without flash) even when switching between the pages.
The web-site is not vulcanized yet (there were another issues with that), so it is not very fast, but this should not be a reason. I was playing with the imports in <head> section and scripts, but nothing helps. Seems that the page actually renders only after DomContentLoaded event.
Any suggestions?
The web-site can be checked on this url and the source code is also available on GitHub.
If you refer to the transition when navigating between pages — the Polymer website feels faster because they don't do full page loads. Instead, they use AJAX to load the new pages and modify your URL bar with the help of the History API to make it look like you went from page A to page B. The term for this kind of thing is Single-page application.
I have what is probably a very stupid question. I have been writing a Ruby On Rails app for the last few weeks, using the excellent Bootstrap/Twitter components to avoid me having to do anything artistic.
I noticed on that site, the navigation bar does not appear to ever reload.
http://twitter.github.com/bootstrap/javascript.html
Clicking on the links at the very top (Overview, Scaffolding, etc) causes the page to change, and the URL to change, but the topbar itself does not appear to reload.
I can't detect anything AJAX-y going on that would do this (using Chrome's dev toolbar etc). I can only imagine that it's:
An optical illusion, and it is reloading just it's so fast I can't see it. But then why does it not appear to reload at the same time as the content?
Some undetectable AJAX going on
Some sort of browser caching going on (can you do that for a rendered page element)
Something completely different
Any thoughts most welcome :)
The boostrap site's navbar does seem to be static during reloads but it isn't some clever js that is doing that. There is no hidden content that is being displayed.
What's happening here is a very fast page load. The guys at boostrap moved all their js links and scripts to the bottom of their html so their pages load faster, they even say that in their html. The pages load so much faster that certain elements like the navbar don't seem to change at all. I tried it on my on site and low and behold the static navbar illusion.
So maybe moving your js and scripts to the bottom of your html can help you achieve the same trick.
The entire page (each tab) is loaded, and hidden when the page loads.
The URL is changed using location.hash when the links are clicked (and JavaScript is blocking navigation).
When the hash is changed, the onhashchange event is ran, and the correct div is shown.
Here is an example: http://jsfiddle.net/uFgtS/ (Well, I guess you can't see the url change. Copy the HTML, CSS and JS into a file and run it.)
How do I change the browser URL (or URI) without a page refresh using HTML5 and HTML5Shiv for IE? For instance if I am on the page http://www.example.com and I want to go to http://www.example.com/4f6gt without having to reload the page. I understand how to load the content with AJAX, I have been using AJAX for a while now, but I am new to the HTML5 point of view for this. The reason I wanna do this is because I wanna be able to have people navigate pages without the time it takes to reload the DOM of the main page, but have a deep link that they can also go to so they have a one step way to get back. Thanks!!
Check out pjax or history.js
It's not going to work in < IE9, because IE doesn't support html5 history api (history.pushState() and history.replaceState()). The shim won't help. Should work in IE10.
Both those plugins degrade gracefully. History.js can also degrade with a hashbang to support dynamic content loads.