關(guān)于預(yù)加載InstantClick的問(wèn)題解決方法
昨晚在改造的時(shí)候代碼高亮沒(méi)法執(zhí)行,準(zhǔn)確的說(shuō)是只執(zhí)行一次,第二次就不執(zhí)行了。所以發(fā)文說(shuō)明一下,而且大致看了InstantClick的文檔,主要還是一個(gè)黑名單區(qū)域的問(wèn)題。按我個(gè)人的理解,黑名單主要包含兩種比較常見(jiàn)的過(guò)濾類型,一種是a標(biāo)簽,另一種是js。根據(jù)其原理實(shí)際上就是對(duì)黑名單區(qū)域不進(jìn)行處理(按正常手動(dòng)打開(kāi)的情況加載刷新),這種不處理才能讓相關(guān)的結(jié)構(gòu)和js起作用。。
所以在InstantClick執(zhí)行時(shí),看它的引用語(yǔ)句:
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/instantclick.min.js" data-no-instant></script> <script data-no-instant>InstantClick.init();</script>
語(yǔ)句作用就過(guò)濾掉了InstantClick它本身,相當(dāng)于在執(zhí)行后正常刷新一遍自己。
正常加載刷新js
語(yǔ)句本身的data-no-instant參數(shù)意思就是不處理,并且正常刷新這部分結(jié)構(gòu)。所以如果要其他js在InstantClick下起作用,必須將js本身刷新,可以把代碼寫(xiě)入instantclick.min.js里面,也可以帶上data-no-instant參數(shù)獨(dú)立引用。如果不將自己的js寫(xiě)入instantclick.min.js內(nèi),就要利用它的四個(gè)參數(shù)來(lái)重新載入,參考:http://instantclick.io/scripts
<script data-no-instant> InstantClick.on('change', function() { // 回調(diào) }); InstantClick.init(); </script>
a標(biāo)簽
InstantClick對(duì)新窗口打開(kāi)的a標(biāo)簽是不處理的,還有在帶有data-no-instant參數(shù)的標(biāo)簽包裹下的a標(biāo)簽也不會(huì)處理。如<div data-no-instant>這部分會(huì)按正常情況刷新</div>。
最后總結(jié):data-no-instant
屬性是用來(lái)避免instantclick在頁(yè)面切換時(shí)對(duì)該元素重復(fù)加載(意思就是按正常刷新)。它可以用在script、style標(biāo)簽中,也能放在a標(biāo)簽中,表示該鏈接將使用正常方式打開(kāi)而不用instantclick加速,但對(duì)于div標(biāo)簽是沒(méi)有用的,這一點(diǎn)必須知曉。
搞清楚上面兩點(diǎn)就好辦了,之前把它當(dāng)成是ajax來(lái)理解,是整個(gè)body請(qǐng)求過(guò)來(lái)。也就是說(shuō)把不處理的部分放在body標(biāo)簽之外也是可以的。
值得一提的是,我個(gè)人還是很中意它緩存后退前進(jìn)的功能的,這樣非常快。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript-解決mongoose數(shù)據(jù)查詢的異步操作
這篇文章主要介紹了javascript-解決mongoose數(shù)據(jù)查詢的異步操作,具有一定的參考價(jià)值,有興趣的可以了解一下。2016-12-12非主流的textarea自增長(zhǎng)實(shí)現(xiàn)js代碼
今天稍微研究了下textarea隨輸入內(nèi)容自動(dòng)增長(zhǎng)的功能,通過(guò)google參考了一些實(shí)現(xiàn)方式2011-12-12javascript函數(shù)報(bào)Uncaught?ReferenceError:?XXX?is?not?define
本文主要介紹了javascript函數(shù)報(bào)Uncaught?ReferenceError:?XXX?is?not?defined,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07Javascript 實(shí)現(xiàn)的數(shù)獨(dú)解題算法網(wǎng)頁(yè)實(shí)例
此算法的實(shí)現(xiàn),就是模擬人腦的思考和計(jì)算過(guò)程,有需要的朋友可以參考一下2013-10-10基于JavaScript實(shí)現(xiàn)彈出框效果
彈出框在網(wǎng)站頁(yè)面中是必不可少的一部分,今天借助腳本之家平臺(tái)給大家分享使用js實(shí)現(xiàn)簡(jiǎn)單的彈出框效果,感興趣的朋友一起學(xué)習(xí)吧2016-02-02JS實(shí)現(xiàn)基本的網(wǎng)頁(yè)計(jì)算器功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)基本的網(wǎng)頁(yè)計(jì)算器功能,涉及JavaScript事件響應(yīng)及數(shù)值運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2020-01-01