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

feat: optimize image loading and critical rendering path by adding image preloads in webpack config, updating image handling in multiple components, and ensuring alt attributes are set for accessibility

Browse Source
This commit is contained in:
sebseb7
2025-07-20 15:19:16 +02:00
parent e0da7ed312
commit 2b64719758
5 changed files with 81 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Images.js
View File

@@ -132,6 +132,7 @@ class Images extends Component {
component="img"
height="400"
image={getImagePath(this.props.pictureList)}
alt={this.props.productName || 'Produktbild'}
fetchPriority="high"
loading="eager"
sx={{
@@ -174,6 +175,7 @@ class Images extends Component {
height="400"
fetchPriority="high"
loading="eager"
alt={this.props.productName || 'Produktbild'}
sx={{
objectFit: 'contain',
cursor: 'pointer',
@@ -236,6 +238,7 @@ class Images extends Component {
<CardMedia
component="img"
height="80"
alt={`${this.props.productName || 'Produktbild'} - Bild ${originalIndex + 1}`}
sx={{
objectFit: 'contain',
cursor: 'pointer',
@@ -308,6 +311,7 @@ class Images extends Component {
{this.state.pics[this.state.mainPic] && (
<CardMedia
component="img"
alt={this.props.productName || 'Produktbild'}
sx={{
objectFit: 'contain',
width: '90vw',
@@ -361,6 +365,7 @@ class Images extends Component {
<CardMedia
component="img"
height="60"
alt={`${this.props.productName || 'Produktbild'} - Miniaturansicht ${originalIndex + 1}`}
sx={{
objectFit: 'contain',
cursor: 'pointer',