• 搜索
  • 夜间模式
    ©2016-2025  周伯通的小站 Theme by OneBlog
    搜索
    标签
    # linux # python # android # 学习 # 折腾 # 教程 # 记录 # 软件 # vps # 新闻
  • 首页>
  • 前端>
  • 正文
  • 分享一个自己使用的 instantclick 加载方法

    2017年12月03日 12 阅读 0 评论 1813 字

    通常,我们为了减少DNS的查询时间,我们可以使用dns prefetch为该页面中链接的做解析,提升页面的加载速度。类似的,我们可以在鼠标滑到链接上到点击的时间间隙去加载这个页面,通常这个间隙有几百毫秒,利用InstantClick,我们可以充分利用这几百毫秒,让网站能够瞬间显示新页面,几乎没有延迟。

    InstantClick的安装

    安装InstantClick非常简单,只要把InstantClick下载过来放到某一个目录下,然后在</body>之前引用一下代码即可,例如:

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

    InstantClick可能会导致出现白屏的情况,官方给出了例子,解决了和Google Adsense之间的冲突。我发现百度统计也会导致白屏,在<script>中加data-no-instant会解决这个问题,就像上面的例子一样。由于不懂JS,不知道这会不会影响统计。

    InstantClick工作原理

    InstantClick使用pushState和Ajax(pjax)来实现,只替换<body>和头部的<title>,浏览器不必重新解析编译页面,这样在页面跳转的过程中,浏览器不会闪一下白屏,看上去页面在瞬间就加载完成了。

    InstantClick的进度条

    默认情况下,InstantClick在载入页面的时候,会在页面的顶部显示一个进度条,默认的颜色是#29d,你可以更改颜色:

    #instantclick-bar {
    background: white;
    }

    也可以隐藏进度条:

    #instantclick {
    display: none;
    }


     

    当然上面的都是网上找到的说明,并不适合每一个人
    下面就直接贴出我自己个儿的使用方案吧

    方法

    在footer.php最底部</body>前添加一下代码

    <!-- instantclick js -->
    <script src="//cdn.bootcss.com/instantclick/3.0.1/instantclick.min.js" data-no-instant></script>
    <script data-no-instant>
    	InstantClick.on('change', function(isInitialLoad) {
    		if (isInitialLoad === false) {
    			if (typeof Prism !== 'undefined') Prism.highlightAll(true,null);
    			if (typeof ga !== 'undefined') ga('send', 'pageview', location.pathname + location.search);
    		}
    	});
    	InstantClick.init();
    </script>

    恩,就这么简单,typecho和wordpress都可以用,和其他插件什么的暂时没发现什么冲突之类的,如果有请自行解决,哈哈哈

    我是在之前用typecho的时候使用的这段代码,作者已经忘记是谁了,是从别人的网页里扒出来的,再加上自己小小的修改。

    本文著作权归作者 [ 老周 ] 享有,未经作者书面授权,禁止转载,封面图片来源于 [ 互联网 ] ,本文仅供个人学习、研究和欣赏使用。如有异议,请联系博主及时处理。
    instantclickjs优化
    取消回复

    发表留言
    回复

    Copyright©2016-2025  All Rights Reserved.  Load:0.017 s
    Theme by OneBlog V3.6.4
    夜间模式

    开源不易,请尊重作者版权,保留基本的版权信息。