คำนวณการชะลอตัวของเคอร์เซอร์เพื่อคาดการณ์ว่าลิงก์กำลังจะคลิกเมื่อใด
$ 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 อย่างสมบูรณ์ มันจะส่งคืนฟังก์ชัน teardown ที่คุณสามารถเรียกได้:
var teardown = futurelink ( options ) ;
// Later…
teardown ( ) ;ตอนนี้ Listener กิจกรรมจะถูกลบออก และ Futurelink จะไม่บอกคุณว่าลิงก์ต่างๆ กำลังจะคลิกอีกต่อไปเมื่อใด
บน samknows.com จะเร่งความเร็วการโหลดหน้าเว็บที่ไม่ได้เริ่มต้นโดยเฉลี่ย 870ms
คุณสามารถดูบทความเกี่ยวกับเรื่องนั้นได้ใน SamKnows Medium
เผยแพร่ภายใต้ใบอนุญาต MIT
