設計
類似 term.ptt.cc 滑鼠移到圖片連結時「直接顯示圖片」的功能。
當場讀取圖片,浮動顯示,位置隨滑鼠游標移動。
備料
在 React 專案,採用
Floating UI
的 FloatingPortal 作為圖片容器,用一個 atom 記錄目前要預覽的 URL,然後在 <a> 的 mouse 事件操作它們。
根據所在連結的 URL 判斷是否為圖片,是的話就載入,onLoad 時設定維度,讓 Floating UI 自己判斷位置。
打磨
-
問題:圖片在畫面邊緣會跳動
圖片切到畫面邊緣時,Floating UI 會嘗試重新定位,造成跳動。
更糟的是,因為 mouseover 會更新滑鼠位置,而且「載入中」的圖片尺寸、載入後的圖片尺寸調整都會變更最終維度,以致跳動可能循環,看起來就是不斷抖動。
不好解決,最後用騙的,把容器的 pointer-events 關掉避免重複滑鼠事件,再用 CSS 動畫讓圖片先保持透明,100 ms 後才看得見,這時閃爍多半也結束了。
參考 commit 817b816。
-
問題:手機上沒有 mouse 事件
手機上無法用 mouseover/mouseout 事件來偵測到需要預覽,會變成 touch 的時候啟動預覽。
雖然仍有基本可用性,但無法用 mouseout 關閉預覽,且再度 touch 時,到底會再度預覽,還是變成 touch 連結而開啟,行為差異很細微,使用者難以預期。
解決方式是另外處理 touch 事件(
onTouchStart,onTouchEnd,onTouchCancel),自己處理預覽行為,唯有當 touch 按住超過一定時間後,才交還瀏覽器內建的處理器(打開連結)。
成果
這個功能做在 Feeders 事實選集和地圖留言中,原始碼都在 GitHub。







