<!--************************************************************初始化提示************************************************************************-->

<style>

    #loading {

      position: fixed;

      top: 50%;

      left: 50%;

      transform: translate(-50%, -50%);

      background-color: rgba(0, 0, 0, 0.5);

      color: white;

      padding: 20px;

      border-radius: 5px;

      z-index: 9999;

      display: none;

    }

    #progress {

      width: 180px;

      height: 20px;

      border: 1px solid #ccc;

      margin-top: 10px;

    }

    #progress-bar {

      width: 0%;

      height: 100%;

      background-color: #4CAF50;

      transition: width 0.5s ease;

    }

    #progress-text {

      margin-top: 5px;

    }

  </style>

<div id="loading">

    <p>正在初始化首页最新内容请稍后...</p>

    <div id="progress">

      <div id="progress-bar"></div>

    </div>

    <p id="progress-text">0%</p>

  </div>

<script>

    // 显示加载提示

    document.getElementById('loading').style.display = 'block';

    // 初始化进度相关变量

    let progress = 0;

    const totalSteps = 100; 

    const interval = setInterval(() => {

      progress += Math.floor(Math.random() * 10) + 25; 

      if (progress >= totalSteps) {

        clearInterval(interval);

        // 加载完成

        document.getElementById('loading').style.display = 'none';

      }

      // 更新进度条和文本

      document.getElementById('progress-bar').style.width = progress + '%';

      document.getElementById('progress-text').innerHTML = progress + '%';

    }, 500);

    // 统一处理页面加载完成事件

    function handleLoad() {

      document.getElementById('loading').style.display = 'none';

    }

    if (window.addEventListener) {

      window.addEventListener('load', handleLoad);

    } else if (window.attachEvent) {

      window.attachEvent('onload', handleLoad);

    }

  </script>