ホームページ  >  記事  >  ウェブフロントエンド  >  InstantClick.js を使用して 200 ミリ秒でページを事前にロードする詳細な例

InstantClick.js を使用して 200 ミリ秒でページを事前にロードする詳細な例

巴扎黑
巴扎黑オリジナル
2017-09-13 09:36:231596ブラウズ

この記事では、主に InstantClick.js を使用してページを 200 ミリ秒前にロードする方法を紹介します。編集者はこれが非常に優れていると考えたので、参考として共有します。エディターをフォローして見てみましょう

前書き

Web サイトの読み込みを高速化する方法はたくさんあります。公式 Web サイトの英語ドキュメントを注意深く調べたところ、この InstantClick.js を見つけました。 InstantClick.js には非常に優れた実装アイデア (仕組み) があること。

訪問者がリンクをクリックする前 (ここで自分でテストしてください):

  • ホバー (ホバー→クリックの間約 200 ミリ秒)

  • マウスダウン (マウスダウン→クリック 約 100 ミリ秒)、

  • タッチスタート携帯電話のタッチ

通常、これら 2 つのイベントの間には 200 ミリ秒の間隔があり、InstantClick はこの時間間隔を使用してページをプリロードします。このように、ページをクリックすると、ページは実際にローカルに読み込まれ、当然ながらレンダリングは非常に高速になります。

もちろん、InstantClick は Pjax:pushState と Ajax テクノロジーも使用しています

同時に試してみましたが、非常にうまく機能しました。ブログに Pjax を実装する必要がある場合は、InstantClick が適しています。

使い方

instantclick.js をダウンロードします。 instantclick.min.js はわずか 2.5Kb で、非常に小さいです


<script src="instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>

を使用してください 注:

  • data-no-instant は、この JS が 1 回だけ実行されることを意味します。独自の JS に従って設定する必要があります。状況

  • 不必要なプリロードを避けたい場合は、ホバーをオフにしてマウスダウンを有効にすることをお勧めします

エフェクトを表示します

Chrome コンソールを開いて、ホバーするたびに表示されるネットワーク ビューを表示します。最初にページをロードし、クリックすると結果ページを表示できます。

良いアニメーションソフトがないのでGIFアニメ表示はありません

Extension

InstantClickでも設定できるイベントがいくつか用意されています。

  • change ページが変更されました。つまり、クリックで読み込みがトリガーされた後です。

  • fetch ページのプリロードが開始されます。

  • receive ページがプリロードされました。つまり、ホバーまたはマウスダウンによってプリロードがトリガーされますが、ユーザーが必ずしも

インスタンスをクリックするわけではないので、必ずしも変更されるわけではありません

ajaxを使用しているため、Google gaではPVがカウントされないため、変更方法を追加しました


<script src="instantclick.min.js" data-no-instant></script>
<script data-no-instant>
/* Google Analytics code here, without ga(&#39;send&#39;, &#39;pageview&#39;) */
 
InstantClick.on(&#39;change&#39;, function() {
 ga(&#39;send&#39;, &#39;pageview&#39;, location.pathname + location.search);
});
 
InstantClick.init();
</script>

以上がInstantClick.js を使用して 200 ミリ秒でページを事前にロードする詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。