首頁 > web前端 > js教程 > 預先載入InstantClick使用詳解

預先載入InstantClick使用詳解

php中世界最好的语言
發布: 2018-04-17 16:56:13
原創
2094 人瀏覽過

這次帶給大家預先載入InstantClick使用詳解,預先載入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('change', function() {
// 回调
});
InstantClick.init();
</script>
登入後複製

a標籤

InstantClick對新視窗開啟的a標籤是不處理的,還有在帶有data-no-instant參數的標籤包裹下的a標籤也不會處理。如<p data-no-instant>這部分會依正常狀況刷新</p>。

# 最後總結:data-no-instant屬性是用來避免instantclick在頁面切換時對該元素重複載入(意思是按正常刷新)。它可以用在script、style標籤中,也能放在a標籤中,表示該連結將使用正常方式打開而不用instantclick加速,但對於p標籤是沒有用的,這一點必須知道。

搞清楚上面兩點就好辦了,之前把它當成是ajax來理解,是整個body請求過來。也就是說把不處理的部分放在body標籤之外也是可以的。

值得一提的是,我個人還是很中意它快取後退前進的功能的,這樣非常快。                 

##相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

InstantClick怎麼設定才能相容MathJax與百度統計等

##用js操作iframe改變介面高度

ParticlesJS的使用詳解

以上是預先載入InstantClick使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板