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