fengjun/ag-index
1
0
Fork 0
Code Activity

优化加载

Browse Source
This commit is contained in:
fengjun
2025-12-23 15:14:44 +08:00
parent e7a8f8ea79
commit a01cdb045f
2 changed files with 133 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
assets/js/map3d.js
View File

@@ -5,15 +5,18 @@
let mapInitialized = false;
async function initMap3D() {
async function initMap3D(geoDataPromise = null, threeJSPromise = null) {
if (mapInitialized) return;
mapInitialized = true;
const container = document.getElementById("map");
if (!container) return;
// 动态导入 Three.js 模块
const threeModule = await import('https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js');
// 使用预加载的模块或动态导入
const threeModule = threeJSPromise
? (await threeJSPromise) ? (await import('https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js')) : null
: await import('https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js');
const THREE = threeModule.default || threeModule;
const [
@@ -22,13 +25,21 @@ async function initMap3D() {
{ Line2 },
{ LineMaterial },
{ LineGeometry }
] = await Promise.all([
import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/controls/OrbitControls.js'),
import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/renderers/CSS2DRenderer.js'),
import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/lines/Line2.js'),
import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/lines/LineMaterial.js'),
import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/lines/LineGeometry.js')
]);
] = threeJSPromise && (await threeJSPromise)
? [
await import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/controls/OrbitControls.js'),
await import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/renderers/CSS2DRenderer.js'),
await import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/lines/Line2.js'),
await import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/lines/LineMaterial.js'),
await import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/lines/LineGeometry.js')
]
: await Promise.all([
import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/controls/OrbitControls.js'),
import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/renderers/CSS2DRenderer.js'),
import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/lines/Line2.js'),
import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/lines/LineMaterial.js'),
import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/lines/LineGeometry.js')
]);
const scene = new THREE.Scene();
@@ -353,11 +364,11 @@ async function initMap3D() {
map.position.z = map.position.z - center.z - offset[1];
};
// 加载 GeoJSON 数据
// 加载 GeoJSON 数据（使用预加载或重新加载）
const url = "/assets/100000_full.json";
try {
const res = await fetch(url);
const data = await res.json();
const data = geoDataPromise ? await geoDataPromise : await (await fetch(url)).json();
if (!data) throw new Error("No data available");
const map = createMap(data, 0.05);
map.add(createPulseRings(data, 0.05));
scene.add(map);
@@ -371,14 +382,53 @@ function setupLazyMap() {
const mapContainer = document.getElementById("map");
if (!mapContainer) return;
// 预加载 GeoJSON 数据
const preloadGeoData = async () => {
const url = "/assets/100000_full.json";
try {
const res = await fetch(url);
return await res.json();
} catch (err) {
console.error("Failed to preload map data:", err);
return null;
}
};
// 预加载 Three.js 模块
const preloadThreeJS = async () => {
try {
await Promise.all([
import('https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js'),
import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/controls/OrbitControls.js'),
import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/renderers/CSS2DRenderer.js'),
import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/lines/Line2.js'),
import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/lines/LineMaterial.js'),
import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/lines/LineGeometry.js')
]);
return true;
} catch (err) {
console.error("Failed to preload Three.js:", err);
return false;
}
};
if ('IntersectionObserver' in window) {
let geoDataPromise = null;
let threeJSPromise = null;
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
initMap3D();
// 开始并行预加载
geoDataPromise = preloadGeoData();
threeJSPromise = preloadThreeJS();
// 立即初始化地图
initMap3D(geoDataPromise, threeJSPromise);
observer.disconnect();
}
}, {
rootMargin: '200px' // 提前 200px 开始加载
rootMargin: '1200px', // 提前 800px 开始加载（更早触发）
threshold: 0.1 // 10% 可见时即触发
});
observer.observe(mapContainer);
} else {

133
index.html
View File

@@ -11,23 +11,35 @@
<meta name="title" content="烟台岸基网络科技有限公司">
<meta name="Description" content="烟台岸基网络科技有限公司是从事于全程物流链科技服务的互联网软件公司，致力于打造港航企业的互联网生态圈，研发出了航运电子商务平台系统、多码头智能操作系统、全程物流链管理系统等软件产品。">
<meta name="Keywords" content="岸基网络,烟台岸基科技,岸基网络科技,智慧物流,协同运输,物流平台开发,O2O物流平台,航运,航运大数据,航运电商,互联网+航运,云码头，智慧码头，船代软件，数字化航运,码头管理系统,航运电子商务平台系统">
<!-- 预连接优化：提前建立与 CDN 的连接 -->
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
<!-- 关键样式：立即加载 -->
<link rel="stylesheet" href="assets/css/bootstrap-3.3.4.css">
<link href="assets/css/themify-icons.css" rel="stylesheet">
<link href="assets/css/flaticon.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/bootstrap-3.3.4.css">
<link href="assets/css/animate.css" rel="stylesheet">
<link href="assets/fonts/Flaticon.woff2">
<link href="assets/css/owl.carousel.css" rel="stylesheet">
<link href="assets/css/owl.theme.css" rel="stylesheet">
<link href="assets/css/slick.css" rel="stylesheet">
<link href="assets/css/slick-theme.css" rel="stylesheet">
<link href="assets/css/swiper.min.css" rel="stylesheet">
<link href="assets/css/owl.transitions.css" rel="stylesheet">
<link href="assets/css/odometer-theme-default.css" rel="stylesheet">
<link href="assets/css/jquery.fancybox.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<!-- 非关键样式：延迟加载 -->
<link rel="preload" href="assets/css/owl.carousel.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="assets/css/owl.carousel.css"></noscript>
<link rel="preload" href="assets/css/owl.theme.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="assets/css/owl.theme.css"></noscript>
<link rel="preload" href="assets/css/slick.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="assets/css/slick.css"></noscript>
<link rel="preload" href="assets/css/slick-theme.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="assets/css/slick-theme.css"></noscript>
<link rel="preload" href="assets/css/swiper.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="assets/css/swiper.min.css"></noscript>
<link rel="preload" href="assets/css/owl.transitions.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="assets/css/owl.transitions.css"></noscript>
<link rel="preload" href="assets/css/odometer-theme-default.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="assets/css/odometer-theme-default.css"></noscript>
<link rel="preload" href="assets/css/jquery.fancybox.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="assets/css/jquery.fancybox.css"></noscript>
<link href="assets/fonts/Flaticon.woff2" rel="preload" as="font" type="font/woff2" crossorigin>
<!-- 预加载首屏图片 -->
<link rel="preload" href="assets/images/slider/slide-2.webp" as="image">
<link rel="preload" href="assets/images/slider/slide-1.webp" as="image">
<!-- <link href="assets/css/style2.css" rel="stylesheet"> -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
@@ -179,7 +191,7 @@
<section class="section-padding">
<div class="portfolio-container" style="display: flex; align-items: center; justify-content: center; min-height: 400px; position: relative;">
<img src="assets/images/index/bk.jpg" alt="" style="width: 100%; max-width: none;">
<img src="assets/images/index/bk.jpg" alt="" loading="lazy" style="width: 100%; max-width: none;">
<div style="position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%;">
<div class="container">
<div class="row">
@@ -191,7 +203,7 @@
</div>
</div>
</div> <!-- end container -->
<img src="assets/images/index/top.webp" alt="" style="width: 55%; max-width: none; ">
<img src="assets/images/index/top.webp" alt="" loading="lazy" style="width: 55%; max-width: none; ">
</div>
</div>
@@ -216,7 +228,7 @@
<div class="portfolio-grids portfolio-slider">
<div class="grid">
<div class="img-holder">
<img src="assets/images/portfolio/img-1.jpg" alt>
<img src="assets/images/portfolio/img-1.jpg" alt loading="lazy">
</div>
<div class="details">
<div class="inner">
@@ -227,7 +239,7 @@
</div>
<div class="grid">
<div class="img-holder">
<img src="assets/images/portfolio/img-5.jpg" alt>
<img src="assets/images/portfolio/img-5.jpg" alt loading="lazy">
</div>
<div class="details">
<div class="inner">
@@ -238,7 +250,7 @@
</div>
<div class="grid">
<div class="img-holder">
<img src="assets/images/portfolio/img-4.jpg" alt>
<img src="assets/images/portfolio/img-4.jpg" alt loading="lazy">
</div>
<div class="details">
<div class="inner">
@@ -249,7 +261,7 @@
</div>
<div class="grid">
<div class="img-holder">
<img src="assets/images/portfolio/img-3.jpg" alt>
<img src="assets/images/portfolio/img-3.jpg" alt loading="lazy">
</div>
<div class="details">
<div class="inner">
@@ -750,22 +762,22 @@
<div class="col col-xs-12">
<div class="partner-grids partners-slider">
<div class="grid">
<img src="assets/images/partners/jinjiang.png" alt>
<img src="assets/images/partners/jinjiang.png" alt loading="lazy">
</div>
<div class="grid">
<img src="assets/images/partners/qiaoyi.png" alt>
<img src="assets/images/partners/qiaoyi.png" alt loading="lazy">
</div>
<div class="grid">
<img src="assets/images/partners/zhongshanganghang.png" alt>
<img src="assets/images/partners/zhongshanganghang.png" alt loading="lazy">
</div>
<div class="grid">
<img src="assets/images/partners/shanghaihanghua.png" alt>
<img src="assets/images/partners/shanghaihanghua.png" alt loading="lazy">
</div>
<div class="grid">
<img src="assets/images/partners/qinhuangdao.png" alt>
<img src="assets/images/partners/qinhuangdao.png" alt loading="lazy">
</div>
<div class="grid">
<img src="assets/images/partners/rizhao.png" alt>
<img src="assets/images/partners/rizhao.png" alt loading="lazy">
</div>
</div>
</div>
@@ -774,22 +786,22 @@
<div class="col col-xs-12">
<div class="partner-grids partners-slider">
<div class="grid">
<img src="assets/images/partners/beibuwan.png" alt>
<img src="assets/images/partners/beibuwan.png" alt loading="lazy">
</div>
<div class="grid">
<img src="assets/images/partners/jining.png" alt>
<img src="assets/images/partners/jining.png" alt loading="lazy">
</div>
<div class="grid">
<img src="assets/images/partners/liandai.png" alt>
<img src="assets/images/partners/liandai.png" alt loading="lazy">
</div>
<div class="grid">
<img src="assets/images/partners/hainanlingao.png" alt>
<img src="assets/images/partners/hainanlingao.png" alt loading="lazy">
</div>
<div class="grid">
<img src="assets/images/partners/zhujiangchuanwu.png" alt>
<img src="assets/images/partners/zhujiangchuanwu.png" alt loading="lazy">
</div>
<div class="grid">
<img src="assets/images/partners/hefei.png" alt>
<img src="assets/images/partners/hefei.png" alt loading="lazy">
</div>
</div>
</div>
@@ -799,22 +811,22 @@
<div class="partner-grids partners-slider">
<div class="grid">
<img src="assets/images/partners/gangwuju.png" alt>
<img src="assets/images/partners/gangwuju.png" alt loading="lazy">
</div>
<div class="grid">
<img src="assets/images/partners/zhongyunjituan.png" alt>
<img src="assets/images/partners/zhongyunjituan.png" alt loading="lazy">
</div>
<div class="grid">
<img src="assets/images/partners/tangshangang.png" alt>
<img src="assets/images/partners/tangshangang.png" alt loading="lazy">
</div>
<div class="grid">
<img src="assets/images/partners/dongfangguoji.png" alt>
<img src="assets/images/partners/dongfangguoji.png" alt loading="lazy">
</div>
<div class="grid">
<img src="assets/images/partners/weihaigang.png" alt>
<img src="assets/images/partners/weihaigang.png" alt loading="lazy">
</div>
<div class="grid">
<img src="assets/images/partners/wuzhou.png" alt>
<img src="assets/images/partners/wuzhou.png" alt loading="lazy">
</div>
</div>
</div>
@@ -937,39 +949,30 @@
<!-- All JavaScript files
================================================== -->
<!-- 关键JS：立即加载（页面依赖） -->
<script src="assets/js/jquery-1.11.0.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/kefu.js"></script>
<!--<script>-->
<!--var kefu = new Kefu({-->
<!--// index: "/",-->
<!--tel: "0535－2106025",//电话号码-->
<!--qq: "278294683",//在线QQ-->
<!--wechatPerson: {-->
<!--state: false,// true是开启个人微信二维码, false不开启-->
<!--imgURL: "./imgs/2wm.png" //图片路径-->
<!--},-->
<!--wechatofficial: {-->
<!--state: true,// true是开启微信公众号二维码, false不开启-->
<!--imgURL: "assets/images/wechat.jpg" //图片路径-->
<!--}//微信公众号-->
<!--});-->
<!--</script>-->
<script type="text/javascript">
$("#footer").load("footer.html");
$("#header").load("header.html");
//如果想要操作header.html中的元素，就得等到header.html加载完成后操作
// $("#footer").load("footer.html", function(){
// });
<!-- 预加载header和footer -->
<script>
// 提前加载header和footer
document.addEventListener('DOMContentLoaded', function() {
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
<!-- Plugins for this template -->
<script src="assets/js/jquery-plugin-collection.js"></script>
<!-- Custom script for this template -->
<script src="assets/js/script.js"></script>
<!-- 非关键JS：延迟加载 -->
<script defer src="assets/js/kefu.js"></script>
<script defer src="assets/js/jquery-plugin-collection.js"></script>
<script defer src="assets/js/script.js"></script>
<!-- d3 用于地图，延迟加载 -->
<script defer src="assets/js/d3.min.js"></script>
<!-- 3D 地图模块 - 延迟加载 -->
<script defer src="assets/js/map3d.js" type="module"></script>
<!-- 3D 地图模块 - 懒加载 -->
<script src="assets/js/map3d.js" type="module"></script>
</body>
</html>