futurelink

tautan masa depan

Menghitung perlambatan kursor untuk memprediksi kapan suatu tautan akan diklik.

Memasang

 $ npm install --save futurelink

Penggunaan

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

Berikan array atau NodeList elemen, dan ketika kursor mendekati salah satu elemen tersebut, callback future akan diaktifkan dengan elemen yang dimaksud sebagai argumen. future hanya akan dipanggil satu kali per elemen.

Tautan dibaca langsung dari objek opsi, jadi jika Anda ingin memperbarui tautan yang sedang ditonton (misalnya, karena Anda ingin melihat beberapa elemen yang baru ditambahkan ke DOM), Anda dapat melakukan ini:

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

futurelink ( options ) ;

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

Menonaktifkan bagian halaman/tautan individual

tautan masa depan tidak akan melihat tautan yang no-futurelink atau salah satu elemen induknya. Itu juga hanya melihat tautan internal.

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

Menghapus tautan masa depan dari halaman

Jika Anda ingin menghapus futurelink sepenuhnya, ini akan mengembalikan fungsi teardown yang dapat Anda panggil:

 var teardown = futurelink ( options ) ;

// Later…

teardown ( ) ;

Sekarang pendengar acara akan dihapus dan futurelink tidak akan memberi tahu Anda lagi kapan tautan akan diklik.

Seberapa efektifkah itu

Di samknows.com, ini mempercepat pemuatan halaman non-awal rata-rata 870ms.

Bagaimana cara kerjanya?

Anda dapat melihat artikel tentang itu di Medium SamKnows.

Penggunaan dengan kerangka kerja

• vue-futurelink

Lisensi

Dirilis di bawah lisensi MIT.