diff --git a/src-tauri/src/commands/files.rs b/src-tauri/src/commands/files.rs
index 84e50e0..4444fc5 100644
--- a/src-tauri/src/commands/files.rs
+++ b/src-tauri/src/commands/files.rs
@@ -6,6 +6,8 @@ use walkdir::WalkDir;
 pub struct FileItem {
     pub filename: String,
     pub path: String,
+    pub height: u32,
+    pub width: u32,
 }
 
 #[tauri::command]
@@ -15,6 +17,7 @@ pub fn scan_directory(target: String) -> Result<Vec<FileItem>, String> {
         .filter_map(|f| f.ok())
         .filter(|f| f.path().is_file())
         .map(|f| {
+            let (width, height) = image::image_dimensions(f.path())?;
             Ok(FileItem {
                 filename: f
                     .path()
@@ -29,6 +32,8 @@ pub fn scan_directory(target: String) -> Result<Vec<FileItem>, String> {
                     .to_str()
                     .ok_or(anyhow!("不能获取到文件路径。"))?
                     .to_string(),
+                width,
+                height,
             })
         })
         .collect::<Result<Vec<FileItem>, anyhow::Error>>()
diff --git a/src/components/ContinuationView.tsx b/src/components/ContinuationView.tsx
index e57a1f9..8babe4e 100644
--- a/src/components/ContinuationView.tsx
+++ b/src/components/ContinuationView.tsx
@@ -2,14 +2,15 @@ import { Box, Stack } from '@mantine/core';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import EventEmitter from 'events';
 import { filter, indexOf, isEmpty, length, map, pluck } from 'ramda';
-import { FC, useContext, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+import { FC, useContext, useLayoutEffect, useMemo, useRef } from 'react';
+import { useLifecycles } from 'react-use';
 import { EventBusContext } from '../EventBus';
 import { useFileListStore } from '../states/files';
 import { useZoomState } from '../states/zoom';
 import { withinRange } from '../utils/offset_func';
 
 export const ContinuationView: FC = () => {
-  const files = useFileListStore.use.files();
+  const { files } = useFileListStore();
   const zoom = useZoomState.use.currentZoom();
   const viewHeight = useZoomState.use.viewHeight();
   const updateActives = useFileListStore.use.updateActiveFiles();
@@ -23,20 +24,21 @@ export const ContinuationView: FC = () => {
   });
   const items = virtualizer.getVirtualItems();
 
-  useEffect(() => {
-    ebus?.addListener('navigate_offset', ({ filename }) => {
-      let index = indexOf(filename, pluck('filename', files));
-      virtualizer.scrollToIndex(index);
-    });
-    ebus?.addListener('reset_views', () => {
-      virtualizer.scrollToOffset(0);
-    });
-
-    return () => {
+  useLifecycles(
+    () => {
+      ebus?.addListener('navigate_offset', ({ filename }) => {
+        let index = indexOf(filename, pluck('filename', files));
+        virtualizer.scrollToIndex(index);
+      });
+      ebus?.addListener('reset_views', () => {
+        virtualizer.scrollToOffset(0);
+      });
+    },
+    () => {
       ebus?.removeAllListeners('navigate_offset');
       ebus?.removeAllListeners('reset_views');
-    };
-  }, [ebus, files, virtualizer]);
+    }
+  );
 
   useLayoutEffect(() => {
     let rangeStart = virtualizer.scrollOffset;
diff --git a/src/models.ts b/src/models.ts
index 66b2fb0..36acf13 100644
--- a/src/models.ts
+++ b/src/models.ts
@@ -2,4 +2,6 @@ export type FileItem = {
   sort: number;
   filename: string;
   path: string;
+  width: number;
+  height: number;
 };