diff --git a/assets/js/map3d.js b/assets/js/map3d.js index 80fe7ae..b6a1279 100644 --- a/assets/js/map3d.js +++ b/assets/js/map3d.js @@ -1,6 +1,6 @@ /** - * 3D 地图模块 - 懒加载版本 - * 通过 IntersectionObserver 触发加载,避免阻塞首屏渲染 + * 3D 地图模块 + * 在首页首屏完成首帧渲染后立即预热加载,避免滚动到地图区域才开始请求资源。 */ 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 setupLazyMap() { +function warmupMapAfterFirstPaint() { const mapContainer = document.getElementById("map"); if (!mapContainer) return; @@ -419,34 +418,25 @@ function setupLazyMap() { } }; - if ('IntersectionObserver' in window) { - let geoDataPromise = null; - let threeJSPromise = null; + const startMapWarmup = () => { + const geoDataPromise = preloadGeoData(); + const threeJSPromise = preloadThreeJS(); + initMap3D(geoDataPromise, threeJSPromise); + }; - const observer = new IntersectionObserver((entries) => { - if (entries[0].isIntersecting) { - // 开始并行预加载 - geoDataPromise = preloadGeoData(); - threeJSPromise = preloadThreeJS(); - - // 立即初始化地图 - initMap3D(geoDataPromise, threeJSPromise); - observer.disconnect(); - } - }, { - rootMargin: '1200px', // 提前 800px 开始加载(更早触发) - threshold: 0.1 // 10% 可见时即触发 + if ("requestAnimationFrame" in window) { + // 等首页首屏至少完成一次绘制,再启动地图资源加载。 + requestAnimationFrame(() => { + requestAnimationFrame(startMapWarmup); }); - observer.observe(mapContainer); } else { - // 降级:直接加载 initMap3D(); } } -// 页面加载完成后设置懒加载 +// 页面可操作后启动地图预热 if (document.readyState === 'loading') { - document.addEventListener('DOMContentLoaded', setupLazyMap); + document.addEventListener('DOMContentLoaded', warmupMapAfterFirstPaint); } else { - setupLazyMap(); + warmupMapAfterFirstPaint(); }