关于预加载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 类型转换常见方法小结
May 31 Javascript
为jQuery增加join方法的实现代码
Nov 28 Javascript
让AJAX不依赖后端接口实现方案
Dec 03 Javascript
jquery+css3打造一款ajax分页插件(自写)
Jun 18 Javascript
jquery中checkbox全选失效的解决方法
Dec 26 Javascript
获取阴历(农历)和当前日期的js代码
Feb 15 Javascript
Javascript中的Prototype到底是什么
Feb 16 Javascript
深入理解JavaScript中的浮点数
May 18 Javascript
js字符串引用的两种方式(必看)
Sep 18 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
Oct 24 Javascript
彻底揭秘keep-alive原理(小结)
May 05 Javascript
vue学习笔记之slot插槽用法实例分析
Feb 29 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
PHP 5.5 创建和验证哈希最简单的方法详解
2013/11/07 PHP
有关于PHP中常见数据类型的汇总分享
2014/01/06 PHP
Zend Framework页面缓存实例
2014/06/25 PHP
php中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
php 修改上传文件大小限制实例详解
2016/10/23 PHP
[原创]php正则删除img标签的方法示例
2017/05/27 PHP
微信推送功能实现方式图文详解
2019/07/12 PHP
Laravel 框架返回状态拦截代码
2019/10/18 PHP
JavaScript 中的replace方法说明
2007/04/13 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
jquery select多选框的左右移动 具体实现代码
2013/07/03 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
2016/01/23 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
React创建组件的三种方式及其区别
2017/01/12 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
2017/03/06 Javascript
详解Nodejs mongoose
2018/06/10 NodeJs
layui点击按钮添加可编辑的一行方法
2018/08/15 Javascript
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
js判断密码强度的方法
2020/03/18 Javascript
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
Python中除法使用的注意事项
2014/08/21 Python
Python中利用sqrt()方法进行平方根计算的教程
2015/05/15 Python
Python实现把json格式转换成文本或sql文件
2015/07/10 Python
设计模式中的原型模式在Python程序中的应用示例
2016/03/02 Python
python模块导入的细节详解
2018/12/10 Python
对python中的six.moves模块的下载函数urlretrieve详解
2018/12/19 Python
对python模块中多个类的用法详解
2019/01/10 Python
详解pytorch中squeeze()和unsqueeze()函数介绍
2020/09/03 Python
Python实现简单的猜单词小游戏
2020/10/28 Python
李维斯法国官网:Levi’s法国
2019/07/13 全球购物
开学寄语大全
2014/04/08 职场文书
明信片寄语大全
2014/04/08 职场文书
安娜卡列尼娜观后感
2015/06/11 职场文书
浅谈Golang 嵌套 interface 的赋值问题
2021/04/29 Golang