关于预加载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与Prototype并存的冲突的解决方法
Aug 29 Javascript
基于JQuery的一句代码实现表格的简单筛选
Jul 26 Javascript
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
Sep 22 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
May 25 Javascript
Knockoutjs 学习系列(一)ko初体验
Jun 07 Javascript
一次$.getJSON不执行的简单记录
Jul 19 Javascript
Vue自定义图片懒加载指令v-lazyload详解
Dec 31 Javascript
React Native 环境搭建的教程
Aug 19 Javascript
vue实现点击选中,其他的不选中方法
Sep 05 Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 Javascript
three.js欧拉角和四元数的使用方法
Jul 26 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
ThinkPHP php 框架学习笔记
2009/10/30 PHP
PHP 面向对象 final类与final方法
2010/05/05 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
ie 处理 gif动画 的onload 事件的一个 bug
2007/04/12 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
2014/02/19 Javascript
node.js中的fs.open方法使用说明
2014/12/17 Javascript
Angular中$compile源码分析
2016/01/28 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
2017/01/09 Javascript
使用gulp搭建本地服务器并实现模拟ajax
2017/04/05 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
webpack中如何使用雪碧图的示例代码
2018/11/11 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
2019/05/07 Javascript
js利用拖放实现添加删除
2020/08/27 Javascript
JavaScript 实现下雪特效的示例代码
2020/09/09 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
wxPython 入门教程
2008/10/07 Python
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
python统计指定目录内文件的代码行数
2019/09/19 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
pycharm的python_stubs问题
2020/04/08 Python
python爬虫scrapy基于CrawlSpider类的全站数据爬取示例解析
2021/02/20 Python
毕业生怎样写好自荐信
2013/11/11 职场文书
技术总监个人的自我评价范文
2013/12/18 职场文书
五水共治一句话承诺
2014/05/30 职场文书
洗手间标语
2014/06/23 职场文书
政风行风建设责任书
2014/07/23 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
2015年班干部工作总结
2015/04/29 职场文书
检察院起诉书
2015/05/20 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书
如何将numpy二维数组中的np.nan值替换为指定的值
2021/05/14 Python
python中%格式表达式实例用法
2021/06/18 Python