快速打開網站鏈接的 JavaScript 庫：InstantClick 3.0 發布

InstantClick 是個 JavaScript 庫,能快速的打開網站的鏈接,大大加快網站訪問速度。利用用戶鼠標移到鏈接和點擊鏈接之間那一點時間差，預載入頁面，讓用戶感覺頁面點擊后立即打開了。

項目主頁：http://www.baiduhome.net/lib/view/home/1392430655663

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. ¹

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. ²

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. ?