前言

加速網(wǎng)站加載的方式有很多，在@Roc的推薦下，我找到了這個InstantClick.js，仔細查看了官網(wǎng)的英文文檔，發(fā)現(xiàn)InstantClick.js有個很好的實現(xiàn)思路(how-it-works)。

在訪問者點擊一個鏈接之前( 鼠標測試：test yourself here )：

• 懸停 hover (hover->click之間200ms左右)
• 鼠標按下 Mousedown (Mousedown->click之間100ms左右)，
• Touchstart 手機觸碰

這兩個事件之間通常有200ms的間隔，InstantClick 利用這個時間間隔預加載頁面。這樣當你點擊頁面的時候，其實頁面已經(jīng)加載到本地了，呈現(xiàn)當然也就會很快。

當然InstantClick 也使用了 Pjax： pushState 和 Ajax 技術(shù)

同時我試用了下，的確效果不錯。如果你的博客需要實現(xiàn)Pjax，InstantClick會是個不錯的選擇。

使用方法

下載instantclick.js。instantclick.min.js僅僅2.5Kb，很小

使用

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

注：

• data-no-instant的含義是，這個JS只會運行一次，需要根據(jù)自己的情況，設(shè)置
• 如果想避免不必要的預加載，關(guān)閉hover，啟用Mousedown是個不錯的選擇，moursedown意味著已經(jīng)點擊鏈接

查看效果

打開chrome console，查看network視圖，會在每次hover時，都可以先加載頁面，在click時展示結(jié)果頁面。

由于沒有一個好的截動畫軟件，所以沒有g(shù)if動畫展示

擴展

InstantClick也提供了幾個事件可以設(shè)置。

• change 頁面更改完畢，即click觸發(fā)加載后
• fetch 頁面開始預加載
• receive 頁面預加載完畢，即：hover或mousedown觸發(fā)的預加載，但不一定會change，因為用戶不一定click

實例

因為使用ajax，所以google ga不會統(tǒng)計PV，所以增加change方法

<script src="instantclick.min.js" data-no-instant></script>
<script data-no-instant>
/* Google Analytics code here, without ga('send', 'pageview') */
 
InstantClick.on('change', function() {
 ga('send', 'pageview', location.pathname + location.search);
});
 
InstantClick.init();
</script>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論