详解如何让InstantClick兼容MathJax、百度统计等

之前有网友提及博客上的LaTex（由MathJax实现）坏掉了，其原因是这里使用了instantclick，以达到网页秒开的效果。但由于instantclick不会重新运行位于head部分的JavaScript代码，而很多工具性软件，比如MathJax、百度统计、Google Analytics、Google Code Prettify等软件都是直接将JS文件插入到head区域。这导致这些工具在instantclick点击后失效，需要重新配置。

配置并不复杂，这些工具本身的代码不用做任何修改，该怎么放还怎么放。但在InstantClick.init();之前添加以下代码：

<script data-no-instant>
InstantClick.on('change', function(isInitialLoad) {
 if (isInitialLoad === false) {
  if (typeof MathJax !== 'undefined') // support MathJax
   MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
  if (typeof prettyPrint !== 'undefined') // support google code prettify
   prettyPrint();
  if (typeof _hmt !== 'undefined') // support 百度统计
   _hmt.push(['_trackPageview', location.pathname + location.search]);
  if (typeof ga !== 'undefined') // support google analytics
    ga('send', 'pageview', location.pathname + location.search);
 }
});
InstantClick.init();
</script>

这段代码的含义是每次页面重载时，通过直接的函数调用来实现MathJax、百度统计、Google Code Prettify、Google Analytics的重新运行。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用InstantClick.js让页面提前加载200ms

    前言 加速网站加载的方式有很多,在@Roc的推荐下,我找到了这个InstantClick.js,仔细查看了官网的英文文档,发现InstantClick.js有个很好的实现思路(how-it-works). 在访问者点击一个链接之前( 鼠标测试:test yourself here): 悬停 hover (hover->click之间200ms左右) 鼠标按下 Mousedown (Mousedown->click之间100ms左右), Touchstart 手机触碰 这两个事件之间通常有200

  • 提升页面加载速度的插件InstantClick

    提升页面加载速度的插件InstantClick

    通常,我们为了减少DNS的查询时间,我们可以使用dns prefetch为该页面中链接的做解析,提升页面的加载速度.类似的,我们可以在鼠标滑到链接上到点击的时间间隙去加载这个页面,通常这个间隙有几百毫秒,利用InstantClick,我们可以充分利用这几百毫秒,让网站能够瞬间显示新页面,几乎没有延迟. InstantClick的安装 安装InstantClick非常简单,只要把InstantClick下载过来放到某一个目录下,然后在</body>之前引用一下代码即可,例如: <scrip

  • 关于预加载InstantClick的问题解决方法

    昨晚在改造的时候代码高亮没法执行,准确的说是只执行一次,第二次就不执行了.所以发文说明一下,而且大致看了InstantClick的文档,主要还是一个黑名单区域的问题.按我个人的理解,黑名单主要包含两种比较常见的过滤类型,一种是a标签,另一种是js.根据其原理实际上就是对黑名单区域不进行处理(按正常手动打开的情况加载刷新),这种不处理才能让相关的结构和js起作用.. 所以在InstantClick执行时,看它的引用语句: <script type="text/javascript"

  • 详解如何让InstantClick兼容MathJax、百度统计等

    之前有网友提及博客上的LaTex(由MathJax实现)坏掉了,其原因是这里使用了instantclick,以达到网页秒开的效果.但由于instantclick不会重新运行位于head部分的JavaScript代码,而很多工具性软件,比如MathJax.百度统计.Google Analytics.Google Code Prettify等软件都是直接将JS文件插入到head区域.这导致这些工具在instantclick点击后失效,需要重新配置. 配置并不复杂,这些工具本身的代码不用做任何修改,该

  • 详解vue项目打包后通过百度的BAE发布到网上的流程

    经过两天的研究终于将VUE打包后的项目通过BAE发布到了网上.虽然接口方面还有一下问题但是自己还是很高兴的. 首先说一下这个项目需要用到的技术,vue+express+git+百度的应用引擎BAE. 继续编辑终于将自己写的JSON文件模拟的数据也传上去了. 具体的步骤: 1,首先讲写好的vue项目打包(具体的打包过程我就不在说了,直接npm run build,就会在VUE项目文件中重新创建一个dist文件,这个就是打包好的项目) 2,在百度的应用引擎BAE部署一个项目,一天才2毛钱很便宜.自己

  • 详解在HTTPS 项目中使用百度地图 API

    百度地图 API 产品简介 百度地图 JavaScript API 是一套由 JavaScript 语言编写的应用程序接口,可帮助您在网站中构建功能丰富.交互性强的地图应用,支持 PC 端和移动端基于浏览器的地图应用开发,且支持 HTML5 特性的地图开发. 百度地图 JavaScript API 支持 HTTP 和 HTTPS,免费对外开放,可直接使用.接口使用无次数限制.在使用前,您需先申请密钥(ak)才可使用. 基础使用 引用百度地图 API, 将 "您的密匙" 替换为你在百度地

  • 详解vue在项目中使用百度地图

    详解vue在项目中使用百度地图

    第一步,去百度地图开发者申请秘钥. 第二步在项目中引入,具体如下 其中index.html存放地图链接,代码如下 然后在APP.vue里面实现,代码如下 <template> <div id="app"> <div id="allmap" ref="allmap"></div> <router-view></router-view> </div> </tem

  • 详解React项目中eslint使用百度风格

    详解React项目中eslint使用百度风格

    1.安装百度Eslint Rule 插件 npm i -D eslint @babel/eslint-parser @babel/eslint-plugin @ecomfe/eslint-config // react项目 npm i -D eslint-plugin-react eslint-plugin-react-hooks // 如果需要支持typescript的话 npm i -D @typescript-eslint/parser @typescript-eslint/eslint-

  • 详解js几个绕不开的事件兼容写法

    本文介绍了详解js几个绕不开的事件兼容写法,分享给大家,具体如下: 1.键盘事件 keyCode 兼容性写法 var inp = document.getElementById('inp') var result = document.getElementById('result') function getKeyCode(e) { e = e ? e : (window.event ? window.event : "") return e.keyCode ? e.keyCode :

  • Vue网页html转换PDF（最低兼容ie10）的思路详解

    HTML转PDF: 1.页面底层实现--Vue:最低兼容ie10 2.实现思路: 1> 使用html2canvas.js将网页转换为图片 2> 使用jsPdf.debug.js将canvas生成的图片转换为pdf文件 具体实现: 要这样实现首先要引入两个插件: html2canvas.js jsPdf.debug.js 注: 因为ie10在canvas截图时候会出现部分样式丢失的情况,所以在代码中有部分修改了页面的样式 所以建议在做截图的时候,将页面代码复制一份到隐藏域,在隐藏域里面做修改,这

  • 兼容浏览器的js事件绑定函数(详解)

    因为javascript中所有对象都集成与Object,那么只有给Object原型添加一个事件绑定函数,就不需要在处理绑定事件的时候,每次写一长串代码,直接调用即可.在代码中添加红色部分代码,直接便可以在代码中直接调用 <div id="mydiv" style="cursor:pointer; background-color:#F00">nihaoa</div> <script language="javascript&q

  • Eclipse工程转为兼容Android Studio模式的方法步骤图文详解

    Eclipse工程转为兼容Android Studio模式的方法步骤图文详解

    方法/步骤 准备好需要转换的工程 , 最好是新建一个文件夹 , 然后将主工程和依赖工程放到同一个目录 屏幕快照 2016-12-24 12.43.02.png 在eclipse中导入主工程和依赖工程 , 导入之后最好先跑一遍 , 确定没有问题再继续操作 屏幕快照 2016-12-24 12.40.03.png 在主工程上右键导出 屏幕快照 2016-12-24 12.53.51.png 将工程导出为Generate Gradle build files , 这一步很重要哦 , 只有导出为这个模式

  • 微信小程序和百度的语音识别接口详解

    介绍 因为项目需要,使用到了微信小程序和百度的语音接口 现在将项目中的一个小模块拿出来单独分享. 技术关键字 微微信小程序 百度语音接口 nodejs,express fluent-ffmegp 环境 windows 10 vs code 1.20.1 微信小程序开发工具 1.02.1802270 花生壳-提供域名和内容穿透-用于方便本地远程调试微信小程序 考虑到业务并不复杂,所以就将所有的代码都放在一个页面就可以了(wxml,wxss,js统称为一个页面) 文件目录 页面 index.wxml

随机推荐