首页  >  文章  >  web前端  >  完美解决有关预加载InstantClick的问题

完美解决有关预加载InstantClick的问题

巴扎黑
巴扎黑原创
2017-09-13 09:32:112007浏览

本篇文章主要介绍了关于预加载InstantClick的问题解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

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


<script type="text/javascript" src="<?php bloginfo(&#39;template_directory&#39;); ?>/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(&#39;change&#39;, function() {
// 回调
});
InstantClick.init();
</script>

a标签

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

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

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

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

以上是完美解决有关预加载InstantClick的问题的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn