InstantClickのプリロードに関する問題を完全に解決します

巴扎黑
リリース: 2017-09-13 09:32:11
オリジナル
1997 人が閲覧しました

この記事では、InstantClick のプリロードの問題の解決策を主に紹介します。編集者はこれが非常に優れていると考えたので、参考として共有します。エディターをフォローして見てみましょう

昨夜の変換中にコードのハイライトを実行できませんでしたが、正確には 1 回だけ実行され、2 回目は実行されませんでした。そこで、それを説明する記事を書き、InstantClick のドキュメントをざっと読んだところ、主にブラックリスト領域の問題であることがわかりました。私の個人的な理解によれば、ブラックリストには主に 2 つの一般的なフィルタリング タイプが含まれており、1 つはタグ、もう 1 つは 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 に書き込まない場合は、その 4 つのパラメーターを使用してリロードする必要があります。参考: http://instantclick.io/scripts


<script data-no-instant>
InstantClick.on(&#39;change&#39;, function() {
// 回调
});
InstantClick.init();
</script>
ログイン後にコピー

a タグ

InstantClick は、新しいウィンドウで開かれたタグを処理しません。また、data-no-instant パラメーターを持つタグで囲まれたタグも処理されません。たとえば、<p data-no-instant>この部分は通常どおり更新されます</p>。 <p data-no-instant>这部分会按正常情况刷新</p>。

最后总结:data-no-instant

最終的な要約: data-no-instant 属性は、ページが切り替わったときに (通常どおり更新することを意味する) instantclick が要素を繰り返しロードするのを防ぐために使用されます。これは、スクリプト、スタイル タグ、または a タグで使用できます。つまり、リンクはインスタントクリック アクセラレーションを使用せずに通常の方法で開かれますが、p タグには役に立たないことを知っておく必要があります。


上記2点を理解すると扱いやすくなります。 以前はajaxだと思って本体全体でリクエストしていました。つまり、未処理部分をbodyタグの外側に置くことも可能です。

🎜個人的に非常に高速なキャッシュの前後方向の機能が気に入っていることは言及する価値があります。 🎜

以上がInstantClickのプリロードに関する問題を完全に解決しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート