InstantClick 网站提速神器

2016-11-20  本文已影响0人  yundGo

前几天偶然在封尘的博客上遇到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;
}
上一篇下一篇

猜你喜欢

热点阅读