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

执照

根据麻省理工学院许可发布。