futurelink

link futuro

Calcula a desaceleração do cursor para prever quando um link está prestes a ser clicado.

Instalar

 $ npm install --save futurelink

Uso

 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 ) { }
} )

Passe para ele um array ou NodeList de elementos, e quando o cursor estiver se aproximando de um desses elementos, o retorno de chamada future será acionado com o elemento em questão como argumento. future só será chamado uma vez por elemento.

Os links são lidos diretamente do objeto de opções, portanto, se você quiser atualizar os links que estão sendo monitorados (digamos, porque deseja observar alguns elementos recém-adicionados ao DOM), você pode fazer isto:

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

futurelink ( options ) ;

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

Desativando seções da página/links individuais

futurelink não examinará links que tenham uma classe no-futurelink ou um de seus elementos pais. Ele também analisa apenas links internos.

 < 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 >

Removendo futurelink da página

Se você quiser remover completamente o futurelink, ele retornará uma função teardown que você pode chamar:

 var teardown = futurelink ( options ) ;

// Later…

teardown ( ) ;

Agora os ouvintes de eventos serão removidos e o futurelink não informará mais quando os links estão prestes a ser clicados.

Quão eficaz é

Em samknows.com, ele acelera o carregamento de páginas não iniciais em uma média de 870 ms.

Como funciona?

Você pode ver um artigo sobre isso no SamKnows Medium.

Uso com estruturas

• vue-futurelink

Licença

Lançado sob a licença do MIT.