快速打开网站链接的 JavaScript 库:InstantClick 3.0 发布

jopen 11年前

InstantClick 是个 JavaScript 库,能快速的打开网站的链接,大大加快网站访问速度。利用用户鼠标移到链接和点击链接之间那一点时间差,预载入页面,让用户感觉页面点击后立即打开了。

快速打开网站链接的 JavaScript 库:InstantClick

项目主页:http://www.open-open.com/lib/view/home/1392430655663


今天InstantClick3.0发布,主要新功能包括针对移动设备的预加载,以及一个进度条。

Preloading for mobile devices

InstantClick preloads pages on hover, but there’s no hover on mobile devices. Until today mobile devices were only getting pjax’s benefits, without preloading.

The solution turns out to be to preload on touchstart. When your finger starts tapping the screen, InstantClick will start preloading the page in the background. When a click is triggered, the page will have had 300 ms (Android) or 450 ms (iOS) to preload.

The 300/450 ms delay that devices impose are there for detecting double taps that are intended to zoom, InstantClick respects that and thus works without having to optimize your site for mobile devices. 1

Because InstantClick preloads only one link at a time and that there’s a pretty good chance that tapping a link means you want to open it, this should not be a problem for your users’ data fees.

Progress bar

If your site’s layout is a bit crowded, chances are users clicking for their first time on an instant link won’t notice that a page change has happened. This problem could obviate the UX benefits you got out of InstantClick; the progress bar solves that. When a page is displayed instantly, the progress bar appears and just fades away instantly, subtly signaling that the page changed.

This progress bar, much like NProgress, is fake. It’s only there to signal users that a page has changed or is being loaded. 2

The progress bar solve a second problem. InstantClick (and pjax in general) hijack the browser’s loading cycle and with it, the browser’s loading indicator. While most links are displayed instantly, networks can be tricky, especially mobile ones. If for some reason a page is taking a long time to load, the progress bar indicates to users that something is happening, and that your website isn’t broken.

The bar is 2 pixels tall on desktop, and the double of that on mobiles so that it’s noticeable on tinier screens. When you’re zooming on a mobile device the bar automatically scales to an appropriate size. So even if you don’t have a mobile-optimized website, it just works.

The progress bar comes in with a sensible blue color by default, you can change its color or hide it with a few lines of CSS.

The rest

Tinier new features include new events, asset change detection, the ability to blacklist or whitelist all links in a parent element, and bugfixes. InstantClick is now also available via Bower: bower install instantclick.

A detailed list of changes is available on GitHub.

Footnotes

  1. If you have a website specifically for mobile devices, FastClick might be a better option. 
  2. Though in the future, it seems possible to show the real progress by dividing Ajax’s response size by the HTTP Content-Length header.