Yilia主题添加Loading加载特效

通过Js实现简单的Loading加载特效。

添加html、js代码

• 找到\themes\yilia\layout\layout.ejs ,在<div id="container" q-class="show:isCtnShow">的上一行添加：

  <div id="loader-wrapper">
      <div id="loader"></div>
      <div class="loader-section section-left"></div>
      <div class="loader-section section-right"></div>
      <!-- <div class="load_title">Loading. . .<br></div> -->
  </div>
  
  

• 找到themes\yilia\layout\_partial\head.ejs,在</head>结束标签上一行添加：

  <!-- Js控制Loding特效-->
  <script>
    //监听加载状态改变
    document.onreadystatechange = completeLoading;
    
    //加载状态为complete时移除loading效果
    function completeLoading() {
       
        if (document.readyState == "complete") {
       
            var loadingMask = document.getElementById('loader-wrapper');
            loadingMask.parentNode.removeChild(loadingMask);
        }
    }  
  </script>
  <!-- loading结束 -->
  

  上面的代码注意一定要放在百度统计、谷歌统计引用的代码之前，如图：
  

添加css样式

找到\themes\yilia\source\main.0cf68a.css,在文件的开头添加代码：

/* Loding特效样式 */
.chromeframe {
   
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;}
#loader-wrapper {
   
    position: fixed