запретить отображение меток изображений, пока изображения не будут полностью загружены - PullRequest
0 голосов
/ 08 мая 2020

Я использую материальную сетку пользовательского интерфейса и изображения react-cool-images. по какой-то причине при загрузке страницы текст мигает без стиля. Когда я комментирую изображения. Текст отображается отлично без fla sh нестилизованного содержимого. Когда я раскомментирую изображения, происходит ошибка sh нестилизованного содержимого. Я хотел бы знать, есть ли у кого-нибудь идеи о том, как предотвратить этот fla sh нестилизованного контента, который, я могу с уверенностью сказать, вызван загрузкой изображений. Есть ли способ скрыть текст изображения до полной загрузки изображений? вот пример того, как выглядят мои элементы сетки.

<Grid
            item
            xs={12}
            sm={9}
            md={6}
            lg={6}
            xl={6}
            className={classes.grid}
            style={{
              display: "block",
              marginLeft: "auto",
              marginRight: "auto",
              width: "100%",
            }}
          >
            <Img
              placeholder={JobTrackerPlace}
              src={JobTracker}
              cache={false}
              alt='JobTracker'
              className={classes.image}
            />
          </Grid>

          <Grid
            item
            xs={12}
            sm={9}
            md={6}
            lg={6}
            xl={6}
            className={classes.grid}
            style={{
              display: "block",
              marginLeft: "auto",
              marginRight: "auto",
              width: "100%",

            }}
          >
            <Container
              component='main'
              maxWidth='xs'
              style={{
                textAlign: "center",

              }}
            >
              <Typography
                variant='h5'
                style={{
                  marginBottom: 10,
                }}
              >
                JobTracker
              </Typography>

              <Typography
                variant='body2'

              >
                A platform that allows recent graduates from Wyncode Academy to
                track job applications, store resume's, and monitor follow ups.
                Technologies used: ReactJS, NodeJS, Google Cloud Functions, and
                Google Firestore.
              </Typography>
              <br />
              <Box
                className={classes.alumniChips}

              >
                <a
                  rel='noopener noreferrer'
                  href='https://jobtracker.netlify.app/'
                  target='_blank'
                  style={{ margin: "1%" }}
                >
                  <Chip
                    icon={<LanguageIcon />}
                    label='View Site'
                    clickable
                    color='primary'
                  />
                </a>
                <a
                  rel='noopener noreferrer'
                  href='https://github.com/Rterrell25/JobTracker_Client'
                  target='_blank'
                  style={{ margin: "1%" }}
                >
                  <Chip
                    icon={<GitHubIcon />}
                    label='View Code'
                    clickable
                    color='primary'
                  />
                </a>
                <JobTrackerModal />
              </Box>
            </Container>
          </Grid>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...