Blogger 使用 instantpage & instantclick
instant.page 是 InstantClick 作者 Alexandre Dieulot 重新编写的一个轻量(202 行代码)和易用的预加载脚本1。
instant.page 只会预加载 HTML 文件,所以引用 instant.page 对网页其他的 JS 脚本大部分无影响,可以无痛接入 Blogger 模板。这是相对于 InstantClick 的一个优点,同时,它也保留 data-no-instant
属性,在 Blogger 中使用要变为 data-no-instant="data-no-instant"
。
它的使用很简单,在 </body>
标签前引用 instantpage.js 脚本文件即可。
<script crossorigin='anonymous' defer='defer' integrity='sha384-Ru9Gb9wm9FHKVnt9FvZ+Kvu+IKmrX/Dw0ncsVaTA8QxI8Jy9m+79lY2IlLwQCJcq' src='https://lib.baomitu.com/instant.page/latest/instantpage.min.js'/>
以下为文章旧内容,仅作参考。
什么是 InstantClick.js
在访客点击一个链接的步骤是:鼠标悬停(mouseover)、按下(mousedown)与点击(click)。在事件之间通常有 200ms~300ms 的间隔,InstantClick.js 是利用鼠标点击链接时的短暂瞬间完成预加载动作,从而实现了网页迅速加载的错觉。
项目详情及官方文档:http://instantclick.io/ (英文) 中文文档:点此
InstantClick.js 使用
在 </body>
标签前插入
<script data-no-instant='data-no-instant' src='http://lib.baomitu.com/instantclick/3.0.1/instantclick.js'/>
<script data-no-instant='data-no-instant'>InstantClick.init();</script>
与其他 js 脚本文件发生冲突
如果你有另外一个 js 脚本,你并不希望预先加载它,若预加载,那么脚本可能会失效。
这时,我们可以在 script
标签内添加一个data-no-instant
属性。在 Blogger 中,我们需要改为 data-no-instant="data-no-instant"
。
多说评论框消失和多说评论数获取失败
针对评论框,在
<script data-no-instant='data-no-instant'>InstantClick.init();</script>
之前加入以下代码:
<script>//<![CDATA[InstantClick.on("change",function(isInitialLoad){
if(isInitialLoad===false){if($(".ds-thread").length && typeof DUOSHUO !== "undefined"){DUOSHUO.EmbedThread($(".ds-thread")[0]);
}}});//]]></script>
针对于论数获取,在
<script data-no-instant='data-no-instant'>InstantClick.init();</script>
之前加入以下代码:
<script>//<![CDATA[InstantClick.on("change",function(isInitialLoad){
if(isInitialLoad===false){DUOSHUO.ThreadCount($('.ds-thread-count'));
}});//]]></script>