<!-- Generated by SpecStory -->

# Implementing onprogress for Loading Tracking (2025-05-25 18:30:34)

_**User**_

实现 onprogress

---

_**Assistant**_

I'll implement the `onprogress` functionality to track the loading progress of the high-resolution image. Looking at the code, I can see that the `xhr.onprogress` handler is currently empty and there's a linter error about the unused parameter `e`.

---



---

Perfect! I've implemented the `onprogress` functionality. Here's what the implementation does:

1. **Progress Tracking**: The `xhr.onprogress` event handler now properly calculates the loading progress by checking if `e.lengthComputable` is true (which means the server provided the content length).

2. **Progress Calculation**: It calculates the progress percentage using `(e.loaded / e.total) * 100`, where:
   - `e.loaded` is the number of bytes already downloaded
   - `e.total` is the total number of bytes to download

3. **State Updates**: 
   - Updates the local `loadingProgress` state to show the current progress in the UI
   - Calls the optional `onProgress` callback prop to notify parent components of the progress

4. **Linter Fix**: The parameter `e` is now being used, which fixes the linter error.

The progress will now be displayed in the loading indicator at the bottom of the component, showing both a percentage and being passed to any parent component that wants to track the loading progress.

---

