Detailed explanation of preloading InstantClick

This time I will bring you a detailed explanation of the use of preloaded InstantClick. What are the precautions when using preloaded InstantClick? The following is a practical case, let's take a look.

Code highlighting could not be executed during the transformation last night. To be precise, it was only executed once and not executed the second time. So I wrote an article to explain it, and after roughly reading the InstantClick documentation, I found that it is mainly a blacklist area issue. According to my personal understanding, the blacklist mainly includes two common filtering types, one is a tag and the other is js. According to its principle, the blacklist area is not processed (loaded and refreshed according to normal manual opening). This kind of non-processing can make the relevant structures and js work. .

So when InstantClick is executed, look at its reference statement:

<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>

The statement function filters out InstantClick itself, which is equivalent to refreshing itself normally after execution.

Load and refresh js normally

The data-no-instant parameter of the statement itself means that it will not be processed and this part of the structure will be refreshed normally. So if you want other js to work under InstantClick, you must refresh the js itself. You can write the code into instantclick.min.js, or you can use the data-no-instant parameter to reference it independently. If you do not write your own js into instantclick.min.js, you must use its four parameters to reload. Reference: http://instantclick.io/scripts

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

atag

InstantClick does not process a tags opened in new windows, nor does it process a tags wrapped in tags with data-no-instant parameters. For example, <p data-no-instant>this part will be refreshed as normal</p>.

Final summary: data-no-instantAttribute is used to prevent instantclick from repeatedly loading the element when the page switches (meaning to refresh normally). It can be used in script and style tags, and can also be placed in a tags, which means that the link will be opened in the normal way without instantclick acceleration, but it is useless for p tags, which must be known.

It will be easier to handle once you understand the above two points. Previously, we thought it was ajax and it was requested by the entire body. In other words, it is also possible to put the unprocessed part outside the body tag.

It is worth mentioning that I personally like its cachingback and forward function, which is very fast. ​​​​​​​​

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to set InstantClick to be compatible with MathJax and Baidu Statistics, etc.

##Use js to operate iframe to change the interface height

Detailed explanation of the use of ParticlesJS

The above is the detailed content of Detailed explanation of preloading InstantClick. For more information, please follow other related articles on the PHP Chinese website!