Instant Loading with InstantClick.js

Instant Click is a great little javascript library that aims to improve inter-website navigation. As the demo page states; despite the huge increases in bandwidth,  websites haven’t really got much faster, at least relatively. Instant Click argues this is down to latency and gets around the problem with an ingenious hack.

Instant Click will begin to load a linked page when a link is hovered over, anticipating where the user will click next and allowing for near instant page loads within the same website. The average timespan from hovering over a link to mouseup is around 300ms, try it yourself here, but with instantclick.js these 300ms can now be put to use loading the next page.

This is accomplished using AJAX and pushState, or pjax, which allows the new page’s content to be fetched with AJAX and the URL and back button fixed with pushState. This combination prevents the browser needing to recompile scripts and stylesheets, a progress bar is also added to further give the appearance of speed.

 Get Started:

Download Here

Include InstantClick and initialise it near the end of the page:

...
<script src="instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>
</body>
</html>

Read More on how to prevent preloading, whitelisting, blacklisting and more on the instanctclick.io site.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.