Leaflet.js页面预加载器仅显示在导航栏问题求助

云上老周

2026-8-20

问题：Leaflet地图页面预加载器仅显示在导航栏区域

在使用Leaflet.js的带导航栏地图页面中，因Leaflet库加载速度慢添加了预加载器，但预加载器仅显示在导航栏区域，无法覆盖整个页面。

问题原因

预加载器未设置全屏覆盖样式，默认仅在文档流中占据空间
页面导航栏和地图元素未被预加载器遮挡，缺少全屏遮罩层级
原JS代码中main元素不存在，显示控制逻辑错误

解决方案

1. 修改HTML结构

将导航栏和地图包裹在统一容器中，方便控制显示状态：

<!DOCTYPE html>
<html style="height: 100%; margin:0;">
<head>
  <title> METAFARM WORLD </title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/x-icon" href="/favicon.ico">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link rel="stylesheet" type="text/css" href="css/loader1.css">
  <link rel="stylesheet" href="scripts/leaflet/leaflet.css">
  <script src="scripts/leaflet/leaflet.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
  <script src="https://unpkg.com/moralis-v1/dist/moralis.js"></script>
  <script src="https://github.com/WalletConnect/walletconnect-monorepo/releases/download/1.6.2/web3-provider.min.js"></script>
  <script src="js/main.js"></script>
</head>
<body style="height: 100%; margin: 0;">
  <!-- 预加载器容器 -->
  <div class="loader-container">
    <div class="loader">
      <div class="circle"></div>
      <div class="circle"></div>
    </div>
  </div>

  <!-- 页面内容容器 -->
  <div class="page-content">
    <div dir="rtl" style="display:flex;justify-content:flex-end;padding:0.3em;background-color:rgb(4, 24, 54);color:rgb(33, 191, 150);align-items:center">
      <button style="margin-right: 1rem;width:7rem;color:rgb(33, 191, 150);cursor:pointer;height:2rem;margin-left:1rem" id="btn-logout">Logout</button>
      <button style="width:7rem;color:rgb(33, 191, 150);cursor:pointer;height:2rem;margin-left:1rem" id="btn-login">Authenticate</button>
      <button onclick="window.open('https://mfarmgame.com/index.php/ico/metafarm-initial-coin-offering/')" style="margin-left:1rem;background-color:#1890ff;color:white; height:2rem;border:0;cursor:pointer;width:7rem;border-radius:0.2em">
        Presale
      </button>
      <button onclick="window.open('https://marketplace.mfarmgame.com')" style="margin-left:1rem;background-color:#1890ff;color:white; height:2rem;border:0;cursor:pointer;width:7rem;border-radius:0.2em">
        Marketplace
      </button>
      <button onclick="window.open('https://mfarmgame.com')" style="margin-left:1rem;background-color:#1890ff;color:white; height:2rem;border:0;cursor:pointer;width:7rem;border-radius:0.2em">
        Home
      </button>
      <div style="padding:1em;border:1px solid black;border-radius:1em;background-color:rgb(51, 102, 102);margin-left:0.4rem" id="div-wallet">
      </div>
      <a style="margin-left:0.4rem" href="https://mfarmgame.com">
        <svg width="60" height="60" viewBox="0 0 183.33 183.33" fill="none" xmlns="http://www.w3.org/1999/xlink"><polygon points="151.9,156.28 121.26,168.97 90.63,181.67 59.99,168.97 29.35,156.28 16.67,125.65 3.97,95.01 16.67,64.37 29.35,33.74 59.99,21.05 90.63,8.36 121.26,21.05 151.9,33.74 164.59,64.37 177.28,95.01 164.59,125.65 " fill="#009933"></polygon><polygon points="99.77,95.35 127.53,150.76 125.26,154.57 119.98,154.57 91.41,110.76 66.51,153.91 55.97,153.91 51.41,146.27 19.88,94.7 40.7,61.91 45.17,71.79 37.7,94.82 60.5,130.67 81.48,94.68 53.72,39.27 56,35.45 61.27,35.45 90.87,77.89 114.74,36.12 125.28,36.12 129.84,43.75 161.38,95.33 140.55,128.11 136.09,118.24 143.55,95.2 120.75,59.35 " fill="#ffffff"></polygon></svg>
      </a>
    </div>
    <div id="map" style="width: 100%; height: calc(100% - 66px); background: #003333; margin: 0;"></div>
  </div>

  <script type="text/javascript" src="./index.js"></script>
  <script type="text/javascript"> 
    async function initApp() {
      var map = L.map('map').setView([0, 0], 2);
      L.tileLayer('maps/16x162/{z}/{x}/{y}.png', {
        minZoom: 2,
        maxZoom: 6,
        continuousWorld: false,
        noWrap: true,
      }).addTo(map);

      let MY_INVENTORY = await loadInventory(); 

      var bounds = [[43.100983, 1.757813], [40.446947, -1.801758]];
      var rect1 = L.rectangle(
        bounds, 
        { 
          color: calculateColor(getInventoryItemById(MY_INVENTORY, 1 )),
          weight: 1.5 
        }
      ).addTo(map);
      var popup1 = metadataToPopup(getInventoryItemById(MY_INVENTORY, 1 ));
      rect1.bindPopup(popup1);

      var bounds = [[48.04871, 1.757813], [43.100983, -5.405273]];
      var rect2 = L.rectangle(
        bounds, 
        { 
          color: calculateColor(getInventoryItemById(MY_INVENTORY,2)),
          weight: 1.5 
        }
      ).addTo(map);
      var popup2 = metadataToPopup(getInventoryItemById(MY_INVENTORY,2));
      rect2.bindPopup(popup2);
      
      return map;
    }
  </script>
</body>
</html>

2. 修改CSS样式

添加全屏预加载器容器样式，默认隐藏页面内容：

@import url('https://fonts.googleapis.com/css?family=Lato|ZCOOL+KuaiLe&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  line-height: 1.6;
  height: 100vh;
  overflow: hidden;
}

/* 预加载器容器 - 全屏覆盖 */
.loader-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s ease;
}

/* 页面内容 - 默认隐藏 */
.page-content {
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* 加载完成后显示内容 */
.page-content.loaded {
  opacity: 1;
  visibility: visible;
}

/* LOADER 动画样式 */
.loader {
  height: 50px;
  transform-origin: bottom center;
  animation: rotate 3s linear infinite;
}

.circle {
  display: inline-block;
  background-color: purple;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  transform: scale(0);
  animation: grow 1.5s linear infinite;
  margin: -10px;
}

.circle:nth-child(2) {
  background-color: palevioletred;
  animation-delay: 0.75s;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes grow {
  50% {
    transform: scale(1);
  }
}

3. 修改JS逻辑

等待地图初始化完成后隐藏预加载器，替换原超时逻辑：

const loaderContainer = document.querySelector('.loader-container');
const pageContent = document.querySelector('.page-content');

async function initLoader() {
  try {
    // 等待地图初始化完成
    await initApp();
    
    // 平滑隐藏预加载器
    loaderContainer.style.opacity = '0';
    setTimeout(() => {
      loaderContainer.style.display = 'none';
    }, 500);
    
    // 显示页面内容
    pageContent.classList.add('loaded');
  } catch (error) {
    console.error('地图加载失败:', error);
    // 加载失败仍显示页面内容
    loaderContainer.style.display = 'none';
    pageContent.classList.add('loaded');
  }
}

initLoader();

内容的提问来源于stack exchange，提问作者Sam Black

Leaflet.js页面预加载器仅显示在导航栏问题求助

问题原因 #

解决方案 #

1. 修改HTML结构 #

2. 修改CSS样式 #

3. 修改JS逻辑 #

问题原因

解决方案

1. 修改HTML结构

2. 修改CSS样式

3. 修改JS逻辑