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，當遊標接近這些元素之一時，將使用相關元素作為參數來觸發future回調。 future每個元素只會被呼叫一次。

連結是直接從選項物件讀取的，因此如果您想要更新正在監視的連結（例如，因為您想要監視新新增到 DOM 中的一些元素），您可以這樣做：

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

futurelink ( options ) ;

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

禁用頁面的各個部分/單一鏈接

futurelink 不會查看其上或其父元素之一具有no-futurelink類別的連結。它也只查看內部連結。

 < 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

執照

根據麻省理工學院許可發布。