up

assets/js/map3d.js

@@ -1,6 +1,6 @@
 /**
- * 3D 地图模块 - 懒加载版本
+ * 3D 地图模块
- * 通过 IntersectionObserver 触发加载，避免阻塞首屏渲染
+ * 在首页首屏完成首帧渲染后立即预热加载，避免滚动到地图区域才开始请求资源。
  */
 
 const GEO_DATA_URL = new URL("../100000_full.json", import.meta.url).toString();
@@ -385,8 +385,7 @@ async function initMap3D(geoDataPromise = null, threeJSPromise = null) {
     }
 }
 
-// 使用 IntersectionObserver 实现懒加载
+function warmupMapAfterFirstPaint() {
-function setupLazyMap() {
     const mapContainer = document.getElementById("map");
     if (!mapContainer) return;
 
@@ -419,34 +418,25 @@ function setupLazyMap() {
         }
     };
 
-    if ('IntersectionObserver' in window) {
+    const startMapWarmup = () => {
-        let geoDataPromise = null;
+        const geoDataPromise = preloadGeoData();
-        let threeJSPromise = null;
+        const threeJSPromise = preloadThreeJS();
+        initMap3D(geoDataPromise, threeJSPromise);
+    };
 
-        const observer = new IntersectionObserver((entries) => {
+    if ("requestAnimationFrame" in window) {
-            if (entries[0].isIntersecting) {
+        // 等首页首屏至少完成一次绘制，再启动地图资源加载。
-                // 开始并行预加载
+        requestAnimationFrame(() => {
-                geoDataPromise = preloadGeoData();
+            requestAnimationFrame(startMapWarmup);
-                threeJSPromise = preloadThreeJS();
-
-                // 立即初始化地图
-                initMap3D(geoDataPromise, threeJSPromise);
-                observer.disconnect();
-            }
-        }, {
-            rootMargin: '1200px', // 提前 800px 开始加载（更早触发）
-            threshold: 0.1 // 10% 可见时即触发
         });
-        observer.observe(mapContainer);
     } else {
-        // 降级：直接加载
         initMap3D();
     }
 }
 
-// 页面加载完成后设置懒加载
+// 页面可操作后启动地图预热
 if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', setupLazyMap);
+    document.addEventListener('DOMContentLoaded', warmupMapAfterFirstPaint);
 } else {
-    setupLazyMap();
+    warmupMapAfterFirstPaint();
 }