futurelink

フューチャーリンク

カーソルの減速を計算して、リンクがクリックされるタイミングを予測します。

インストール

 $ npm install --save futurelink

使用法

 var futurelink = require ( 'futurelink' ) ;

futurelink ( {
  links : document . querySelectorAll ( 'a' ) ,
  future : function ( link ) {
    // `link` is probably going to be clicked soon
    // Preload some images, if you can!
  } ,
  
  // These also exist, but aren't usually needed:
  hover : function ( link ) { } ,
  click : function ( link ) { }
} )

要素の配列または NodeList を渡すと、カーソルがそれらの要素の 1 つに近づくと、問題の要素を引数としてfutureコールバックが起動されます。 future要素ごとに 1 回だけ呼び出されます。

リンクはオプション オブジェクトから直接読み取られるため、監視されているリンクを更新したい場合 (たとえば、DOM に新しく追加されたいくつかの要素を監視したい場合など)、次のようにすることができます。

 var options = {
  links : document . querySelectorAll ( 'a' ) ,
  future : function ( link ) { }
} ;

futurelink ( options ) ;

router . afterEach ( function ( ) {
  options . links = document . querySelectorAll ( 'a' ) ;
} ) ;

ページのセクション/個々のリンクの無効化

futurelink は、 no-futurelinkクラスを持つリンクまたはその親要素の 1 つを参照しません。また、内部リンクのみを参照します。

 < div class =" no-futurelink " >
  < a href =" /foo-bar " > Futurelink won't tell you about this link </ a >
</ div >

< a href =" /bar-foo " class =" no-futurelink " > It won't tell you about this one either </ a >

ページから futurelink を削除します

futurelink を完全に削除したい場合は、呼び出すことができるteardown関数が返されます。

 var teardown = futurelink ( options ) ;

// Later…

teardown ( ) ;

今後はイベント リスナーが削除され、リンクがいつクリックされようとしているかが futurelink から通知されなくなります。

どれくらい効果があるのか

samknows.com では、初期以外のページの読み込みが平均 870 ミリ秒高速化されます。

どのように機能するのでしょうか?

それに関する記事は SamKnows Medium でご覧いただけます。

フレームワークでの使用

• vue-futurelink

ライセンス

MITライセンスに基づいてリリースされています。