代码之家 › 专栏 › 技术社区 › Kuzma

反应js在主div应用程序之前预呈现html标记

prerender reactjs

0

Kuzma · 技术社区 · 7 年前

我想在主应用程序的div之前预呈现html标记。我发现带有自定义字体(简单线条图标)的库的加载方式与我的加载方式不同。但如果我把这个 <div className="loadicon icon-arrow-left wow tada infinite" data-wow-duration="8s"></div> div在组件中,字体加载良好。这是索引的代码。html现在的外观:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/preloader.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/simple-line-icons.css">
    <!--[if lt IE 9]>
    <script>
    (function(){
        var ef = function(){};
        window.console = window.console || {log:ef,warn:ef,error:ef,dir:ef};
    }());
    </script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv-printshiv.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-shim.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-sham.js"></script>
    <![endif]-->
    <script>
        (function (i, s, o, g, r, a, m) {
            Google Analytics code            
        });         
    </script>
</head>
  <body data-spy="scroll">
      <div id="preloader">
          <div id="status_first">
              <div className="loadicon icon-arrow-left wow tada infinite" data-wow-duration="8s"></div>
          </div>
          <div id="status_second">
              <div className="wow tada infinite" data-wow-duration="8s">K</div>
          </div>
          <div id="status_third">
              <div className="loadicon icon-arrow-right wow tada infinite" data-wow-duration="8s"></div>
          </div>
      </div>    
    <div id="app">
    </div>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script src="js/jquery.nicescroll.min.js"></script>    
    <script src="js/plugins.js"></script>    
    <script src="//cdn.rawgit.com/noelboss/featherlight/1.7.8/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/detect_swipe/2.1.1/jquery.detect_swipe.min.js"></script>
    <script src="js/js.cookie.js" charset="utf-8" type="text/javascript"></script>
    <script src="js/jquery-lang.js" charset="utf-8" type="text/javascript"></script>            
  </body>
</html>

因此,任务只是perrender这段代码:

  <div id="status_first">
      <div className="loadicon icon-arrow-left wow tada infinite" data-wow-duration="8s"></div>
  </div>
  <div id="status_second">
      <div className="wow tada infinite" data-wow-duration="8s">K</div>
  </div>
  <div id="status_third">
      <div className="loadicon icon-arrow-right wow tada infinite" data-wow-duration="8s"></div>
  </div>

1 回复 | 直到 7 年前

1

0

Kuzma 7 年前

我已经解决了这个问题,将html代码移动到应用程序的第一个子组件。