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


Posted in Javascript onSeptember 12, 2017

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

所以在InstantClick执行时,看它的引用语句:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>

语句作用就过滤掉了InstantClick它本身,相当于在执行后正常刷新一遍自己。

正常加载刷新js

语句本身的data-no-instant参数意思就是不处理,并且正常刷新这部分结构。所以如果要其他js在InstantClick下起作用,必须将js本身刷新,可以把代码写入instantclick.min.js里面,也可以带上data-no-instant参数独立引用。如果不将自己的js写入instantclick.min.js内,就要利用它的四个参数来重新载入,参考:http://instantclick.io/scripts

<script data-no-instant>
InstantClick.on('change', function() {
// 回调
});
InstantClick.init();
</script>

a标签

InstantClick对新窗口打开的a标签是不处理的,还有在带有data-no-instant参数的标签包裹下的a标签也不会处理。如<div data-no-instant>这部分会按正常情况刷新</div>。

最后总结:data-no-instant属性是用来避免instantclick在页面切换时对该元素重复加载(意思就是按正常刷新)。它可以用在script、style标签中,也能放在a标签中,表示该链接将使用正常方式打开而不用instantclick加速,但对于div标签是没有用的,这一点必须知晓。

搞清楚上面两点就好办了,之前把它当成是ajax来理解,是整个body请求过来。也就是说把不处理的部分放在body标签之外也是可以的。

值得一提的是,我个人还是很中意它缓存后退前进的功能的,这样非常快。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js同时按下两个方向键
Dec 01 Javascript
JS日期和时间选择控件升级版(自写)
Aug 02 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
Dec 08 Javascript
js+css实现文字散开重组动画特效代码分享
Aug 21 Javascript
认识Knockout及如何使用Knockout绑定上下文
Dec 25 Javascript
Javascript实现单例模式
Jan 24 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
Jan 09 Javascript
原JS实现banner图的常用功能
Jun 12 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
Aug 20 Javascript
工作中常用js功能汇总
Nov 07 Javascript
提升页面加载速度的插件InstantClick
Sep 12 #Javascript
详解如何让InstantClick兼容MathJax、百度统计等
Sep 12 #Javascript
使用InstantClick.js让页面提前加载200ms
Sep 12 #Javascript
VueJs组件prop验证简单介绍
Sep 12 #Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
Sep 12 #Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 #Javascript
react-native DatePicker日期选择组件的实现代码
Sep 12 #Javascript
You might like
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
用php简单实现加减乘除计算器
2014/01/06 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
javascript 贪吃蛇实现代码
2008/11/22 Javascript
javascript 避免闭包引发的问题
2009/03/17 Javascript
精选的10款用于构建良好易用性网站的jQuery插件
2011/01/23 Javascript
按钮JS复制文本框和表格的代码
2011/04/01 Javascript
ExtJs使用总结(非常详细)
2012/03/22 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
javascript中加号(+)操作符的一些神奇作用
2014/06/06 Javascript
Bootstrap和Java分页实例第一篇
2016/12/23 Javascript
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
js断点调试经验分享
2017/12/08 Javascript
原生js实现获取form表单数据代码实例
2019/03/27 Javascript
JS三级联动代码格式实例详解
2019/12/30 Javascript
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
Python3实现转换Image图片格式
2018/06/21 Python
python 进程 进程池 进程间通信实现解析
2019/08/23 Python
python 日志 logging模块详细解析
2020/03/31 Python
基于Pyinstaller打包Python程序并压缩文件大小
2020/05/28 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
大学四年学习的自我评价分享
2013/12/09 职场文书
优秀求职自荐信怎样写
2013/12/18 职场文书
领导失职检讨书
2014/02/24 职场文书
对标管理实施方案
2014/03/12 职场文书
导师工作推荐信范文
2014/05/17 职场文书
工程售后服务承诺书
2014/05/21 职场文书
经理任命书模板
2014/06/06 职场文书
导航工程专业自荐信
2014/09/02 职场文书
2014旅游局党组书记党建工作汇报材料
2014/11/02 职场文书
2014年小学班主任工作总结
2014/11/08 职场文书
副总经理岗位职责
2015/02/02 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书
2016年少先队活动总结
2016/04/06 职场文书
写作技巧:优秀文案必备的3种结构
2019/08/19 职场文书