diff options
| author | Jari Vetoniemi <jari.vetoniemi@indooratlas.com> | 2020-11-12 19:33:57 +0900 |
|---|---|---|
| committer | Jari Vetoniemi <jari.vetoniemi@indooratlas.com> | 2020-11-12 19:33:57 +0900 |
| commit | 0eca7a9986cb5730cc64c858803a1a8040a7bc72 (patch) | |
| tree | 03dc0018e1e9d899efef9a98a8ba7da2d3f4e68c | |
| parent | 5c8387ac7e7b268a7257ad6671b5dc9eb34cc90b (diff) | |
lazy-load card images
| -rw-r--r-- | public/index.html | 1 | ||||
| -rw-r--r-- | public/loading.png | bin | 0 -> 25334 bytes | |||
| -rw-r--r-- | src/App.js | 16 |
3 files changed, 11 insertions, 6 deletions
diff --git a/public/index.html b/public/index.html index 71c2c1f..2a6a775 100644 --- a/public/index.html +++ b/public/index.html @@ -15,6 +15,7 @@ </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> + <img src="%PUBLIC_URL%/loading.png" style='display:none'/> <div id="root"></div> </body> </html> diff --git a/public/loading.png b/public/loading.png Binary files differnew file mode 100644 index 0000000..7f4571b --- /dev/null +++ b/public/loading.png @@ -172,14 +172,18 @@ function StoreItem(props) { subheader={props.data.author} subheaderTypographyProps={{className: classes.text}} /> - <CardMedia className={classes.media} - image={props.data.img} - title={props.data.title} - > + <div className={classes.media}> + <CardMedia + component='img' + loading='lazy' + image={props.data.img} + title={props.data.title} + style={{height: '100%', backgroundImage:'url(/loading.png)'}} + /> <Chip label={props.data.price} className={classes.price}/> <Chip label={t(props.data.cat)} className={classes.cat}/> - <Rating name="size-small" size="small" className={classes.rating} readOnly defaultValue={props.data.rating} precision={0.5}/> - </CardMedia> + <Rating size="small" className={classes.rating} readOnly defaultValue={props.data.rating} precision={0.5}/> + </div> </CardActionArea> </Card> </Grow> |
