seb/reactShop
1
0
Fork 0
Code Issues Pull Requests Activity

refactor: update image rendering logic in MainPageLayout to load images conditionally based on opacity for improved performance

Browse Source
This commit is contained in:
sebseb7
2025-07-23 09:38:41 +02:00
parent 72010c410e
commit 23dbdec432
1 changed files with 16 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/MainPageLayout.js
View File

@@ -612,21 +612,22 @@ const MainPageLayout = () => {
justifyContent: "center",
}}
>
<img
src={box.image}
alt={box.title}
fetchPriority="high"
loading="eager"
style={{
maxWidth: "100%",
maxHeight: "100%",
objectFit: "contain",
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
}}
/>
{/* Image loaded only when needed */}
{getOpacity(pageType) === 1 && (
<img
src={box.image}
alt={box.title}
style={{
maxWidth: "100%",
maxHeight: "100%",
objectFit: "contain",
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
}}
/>
)}
<Box
sx={{
position: "absolute",