fix: hoz scroll too fast; feat: img preload

app/hosts/[hostname]/page.tsx

@@ -124,6 +124,7 @@ export default function HostDetail() {
   const [imagesLoadedCount, setImagesLoadedCount] = useState(0);
   const [imageAspectRatio, setImageAspectRatio] = useState(16 / 9);
   const autoPlayTimer = useRef<NodeJS.Timeout | null>(null);
+  const wheelDeltaAccumulator = useRef(0);
 
   // 格式化内存大小
   const formatMemory = (bytes: number | string) => {
@@ -516,28 +517,20 @@ export default function HostDetail() {
 
   // 播放控制
   const nextFrame = () => {
-    setCurrentFrameIndex(prevIndex => {
-      if (prevIndex < records.length - 1) {
-        const newIndex = prevIndex + 1;
-        setSelectedRecord(records[newIndex]);
-        return newIndex;
+    if (currentFrameIndex < records.length - 1) {
+      setCurrentFrameIndex(currentFrameIndex + 1);
+      setSelectedRecord(records[currentFrameIndex + 1]);
     } else {
       setAutoPlay(false);
-        return prevIndex;
     }
-    });
     stopAutoPlayTimer();
   };
 
   const prevFrame = () => {
-    setCurrentFrameIndex(prevIndex => {
-      if (prevIndex > 0) {
-        const newIndex = prevIndex - 1;
-        setSelectedRecord(records[newIndex]);
-        return newIndex;
+    if (currentFrameIndex > 0) {
+      setCurrentFrameIndex(currentFrameIndex - 1);
+      setSelectedRecord(records[currentFrameIndex - 1]);
     }
-      return prevIndex;
-    });
     stopAutoPlayTimer();
   };
 
@@ -607,22 +600,37 @@ export default function HostDetail() {
 
   // 滚轮事件处理
   useEffect(() => {
+    const WHEEL_THRESHOLD = 20; // 累计多少像素后才切换（可调整）
+
     const handleWheel = (event: WheelEvent) => {
-      if (event.deltaX < 0) {
+      // 累计水平滚动距离
+      wheelDeltaAccumulator.current += event.deltaX;
+
+      // 检查是否超过阈值
+      if (Math.abs(wheelDeltaAccumulator.current) >= WHEEL_THRESHOLD) {
+        if (wheelDeltaAccumulator.current < 0) {
           // 向左滚动，上一帧
           prevFrame();
-      } else if (event.deltaX > 0) {
+        } else {
           // 向右滚动，下一帧
           nextFrame();
         }
+        // 重置累计器
+        wheelDeltaAccumulator.current = 0;
+      }
     };
 
     document.addEventListener('wheel', handleWheel, { passive: true });
     return () => {
       document.removeEventListener('wheel', handleWheel);
+      // 清理累计器
+      wheelDeltaAccumulator.current = 0;
     };
   }, [prevFrame, nextFrame]);
 
+
+
+
   // Effects
   useEffect(() => {
     fetchTimeDistribution();
@@ -810,7 +818,12 @@ export default function HostDetail() {
             {/* 图片预览区域及控制按钮 */}
             {selectedRecord && (
               <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
-
+                {
+                  !(navigator as any).connection?.saveData &&
+                  records.map(record => record.screenshots).flat()
+                    .filter((_, index) => Math.abs(index - currentFrameIndex) <= 20)
+                    .map(screenshot => <link rel="preload" key={screenshot.fileId} href={`/screenshots/${screenshot.fileId}`} as="image" />)
+                }
                 {/* 图片预览区域 */}
                 {selectedRecord.screenshots.map((screenshot, sIndex) => (
                   <div key={sIndex} className="relative mb-6">