关于预加载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 相关文章推荐
基于jquery的loading效果实现代码
Nov 05 Javascript
用循环或if语句从json中取数据示例
Aug 18 Javascript
Node.js 异步编程之 Callback介绍(一)
Mar 30 Javascript
Javascript技术栈中的四种依赖注入详解
Feb 23 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 Javascript
微信小程序 动态绑定数据及动态事件处理
Mar 14 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
Nov 01 Javascript
讲解vue-router之什么是嵌套路由
May 28 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
May 30 Javascript
js实现课堂随机点名系统
Nov 21 Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 Javascript
交互式可视化js库gojs使用介绍及技巧
Feb 18 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 PDO操作MySQL基础教程
2017/06/05 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
JS焦点图切换,上下翻转
2011/05/12 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
2011/09/21 Javascript
javascript实现存储hmtl字符串示例
2014/04/25 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
2016/05/18 Javascript
Three.js快速入门教程
2016/09/09 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
mui框架移动开发初体验详解
2017/10/11 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
jquery实现的分页显示功能示例
2019/08/23 jQuery
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
Python中的推导式使用详解
2015/06/03 Python
python实现最速下降法
2020/03/24 Python
Python验证码截取识别代码实例
2020/05/16 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
解决selenium+Headless Chrome实现不弹出浏览器自动化登录的问题
2021/01/09 Python
JACK & JONES英国官方网站:欧洲领先的男装生产商
2017/09/27 全球购物
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
某科技软件测试面试题
2013/05/19 面试题
学期研究性学习个人的自我评价
2014/01/09 职场文书
暑期社会实践感言
2014/02/25 职场文书
团支书竞选演讲稿
2014/04/28 职场文书
党员创先争优活动总结
2014/05/04 职场文书
党支部换届选举方案
2014/05/08 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
2015年社区妇联工作总结
2015/04/21 职场文书
2015年大学班主任工作总结
2015/04/30 职场文书
以下牛机,你有几个
2022/04/05 无线电