美文网首页
InstantClick 网站提速神器

InstantClick 网站提速神器

作者: yundGo | 来源:发表于2016-11-20 20:29 被阅读0次

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

    相关文章

      网友评论

          本文标题:InstantClick 网站提速神器

          本文链接:https://www.haomeiwen.com/subject/boeypttx.html