前幾天偶然在封塵的博客上遇到InstantClick,網站提速神器。它賦予了頁面上每個超鏈接預加載的能力,除了新打開的窗口!鼠標移動到超鏈上,便會觸發!將dom預先加載到本地,從而達到快速打開網頁的目的。
用法很簡單,下面說下基本用法還有遇到的一些問題。
下載地址:http://instantclick.io/download
在需要引用instantclick的頁面引入js代碼
<script type="text/javascript" src= "js/instantclick.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>
這樣,默認的a標簽都會預加載!除了新打開的窗口!如果給a標簽添加 data-no-instant 屬性,那么這個超鏈接就不會預加載了,在一些特定的場景需要用到,比如說,instantclick 引起的一些CSS、插件加載失敗,無法修復的情況,可以讓鏈接到此頁面的超鏈接失去預加載能力。
我遇到的一個問題,多說評論插件有時候會加載失敗。這跟pjax局部刷新的問題一樣,而這種情況一般就是要重新載入插件了,看多說官網給出的教程 動態加載多說評論框 ,在頁面新增一個方法
function _loadDuodsuo(){
var dus=$( ".ds-thread" );
if($(dus).length==1){
var el = document.createElement('div');
el.setAttribute('data-thread-key',$(dus).attr("data-thread-key"));
el.setAttribute('data-url',$(dus).attr("data-url"));
DUOSHUO.EmbedThread(el);
$(dus).html(el);
}
}
然后在底部再調用一次即可解決該問題。
順便說下,頂部的進度條顏色也是可以修改的O(∩_∩)O~
#instantclick-bar {
background: #fd8a61;
}