Question

当我的网站加载时，它的主页部分会分块加载。它具有导航栏，并且从头开始加载第一个元素，其他四个元素在运行超时功能后加载。但是在其他4个加载的同时，背景也随之加载。因此，当这些元素加载时，它显示了我的about部分，随着每个元素的加载，背景元素也随之加载。一旦他们加载它的罚款。


  /*
  ===============================
              HOME
  ===============================
  */

  .home-div{
    background: rgb(15, 15, 15)
  }

  .arrow{
    animation: point-down-arrow 3s infinite, fade-in 5s;
    font-size: 60px;
    color: rgb(51, 51, 255);
  }

  /*
  ====================================
        GITHUB & RESUME
  ====================================
  */

  .resume{
    display: inline-block;
    font-size: 30px;
    color: rgb(221, 221, 221);
    animation:fade-in;
    animation-duration: 3s;
  }

  .github-profile{
    display: inline-block;
    font-size: 30px;
    animation: fade-in;
    animation-duration: 3s;
  }


  /* 
  ================================
           HOME HEADERS
  ================================
   */

  .hello-header{
    animation: slide-in-left;
    animation-duration: 1.5s;
    font-size: 50px;
    color: rgb(218, 216, 216);
  }

  .name-header{
    animation: slide-down;
    animation-duration: 1s;
    font-size: 50px;
    color: rgb(51, 51, 255)
  }

  .full-stack-header{
    animation: fade-in;
    animation-duration: 4s;
    font-size: 50px;
    color: rgb(214, 213, 213)
  }

这是我的家庭部分样式CSS。

  /*
    ============================
                HOME
    ============================
    */

    .home-div{
      padding: 1% 0% 30% 0%;
      margin-top: 0;
    }

    .hello-header,
    .name-header{
      font-size: 24px;
    }

    .hello-header{
      margin: 35% 0 0 11%
    }

    .name-header{
      margin:-9.5% 0 0 44.3%
    }

    .full-stack-header{
      margin:5% 0 0 17.5%;
      font-size: 22px
    }

    .resume{
      margin:15% 0 0 12.5%;
      font-size: 18px;
      font-size: 18px;
    }

    .github-profile{
      font-size: 18px;
      margin:8% 0 0 20.5%
    }

    .arrow{
      margin:15% 0 0 25%
    }

这是使用移动优先方法的职位。

render(){
      return(
       <div>
         <Navbar />
        <div id='home' className='home-div'>
            <h2 className='hello-header'  style={{display:`${this.state.showHello}`}}>
                Hello, I'm
            </h2>
            <h2 className='name-header'  style={{display:`${this.state.showName}`}}>
                Jason Pallone
            </h2>
            <h2 className='full-stack-header' style={{display: this.state.showFullStack}}>
                I'm a Web Developer.
            </h2>
            <a className='resume' style={{display: this.state.showResume}}>
                Download my resume here!
            </a>
            <a className='github-profile' style={{display: this.state.showGitHub}}>
                View my GitHub here!
            </a>
            <div className='arrow' style={{display: this.state.showArrow}}>
                <a className='arrow' href="#about"> 
                    &#x21E9; 
                </a>
            </div> 

        </div>
      </div>

这是主页部分的React代码。

内联显示为空，以隐藏元素，然后一旦setTimeout运行，它将为内联显示提供一个空字符串值，以显示元素。

感谢您的帮助！

后台加载成块而不是一次全部加载？我正在使用动画

0 个答案: