fix: change feat get json

src/app/[[...lang]]/page.tsx

@@ -4,8 +4,17 @@ import Header from "@/app/components/header";
 import Footer from "@/app/components/footer";
 import Examples from "../components/Examples";
 import ChannelSwiper from "../components/ChannelSwiper";
-import Anim1 from "../components/lottieAnims/Anim1";
-import CustomAnim from "../components/lottieAnims/Anim2";
+import dynamic from 'next/dynamic';
+
+// 添加动态导入所有 Lottie 动画组件
+const Anim1 = dynamic(() => import("../components/lottieAnims/Anim1"), {
+    ssr: false
+});
+
+const CustomAnim = dynamic(() => import("../components/lottieAnims/Anim2"), {
+    ssr: false
+});
+
 import ABAnim from "../components/lottieAnims/Anim3";
 import MultiLanguage from "../components/lottieAnims/MultiLanguage";
 import MultiChannel from "../components/lottieAnims/MultiChannel";

src/app/components/lottieAnims/Anim1.tsx

@@ -1,12 +1,36 @@
 "use client";
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Lottie from "lottie-react";
-const animationData = "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/lottie-json/logoAnim.json";
+const animationDataURL = "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/lottie-json/logoAnim.json";
 
 const logoAnim = () => {
+	const [animationData, setAnimationData] = useState(null);
+
+	useEffect(() => {
+		fetch(animationDataURL)
+			.then((response) => {
+				if (!response.ok) {
+					throw new Error("Failed to load animation data");
+				}
+				return response.json();
+			})
+			.then((data) => {
+				setAnimationData(data); // 设置动画数据
+			});
+	}, []);
+
+	// Lottie 配置
+	const defaultOptions = {
+		loop: true,
+		autoplay: true,
+		animationData: animationData, // 使用远程加载的 JSON 数据
+		rendererSettings: {
+			preserveAspectRatio: "xMidYMid slice",
+		},
+	};
 	return (
 		<div className="absolute w-[908px] h-[356px] right-[-40px]" style={{ transform: "translate(-40px, 4px)" }}>
-			<Lottie animationData={animationData} loop={true} autoplay />
+			<Lottie {...defaultOptions} loop={true} autoplay />
 		</div>
 	);
 };

src/app/components/lottieAnims/Anim2.tsx

@@ -1,12 +1,37 @@
 "use client";
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Lottie from "lottie-react";
-const animationData = "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/lottie-json/custom.json";
+const animationDataJSON = "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/lottie-json/custom.json";
 
 const Anim1 = () => {
+	const [animationData, setAnimationData] = useState(null);
+
+	useEffect(() => {
+		fetch(animationDataJSON)
+			.then((response) => {
+				if (!response.ok) {
+					throw new Error("Failed to load animation data");
+				}
+				return response.json();
+			})
+			.then((data) => {
+				setAnimationData(data); // 设置动画数据
+			});
+	}, []);
+
+	// Lottie 配置
+	const defaultOptions = {
+		loop: true,
+		autoplay: true,
+		animationData: animationData, // 使用远程加载的 JSON 数据
+		rendererSettings: {
+			preserveAspectRatio: "xMidYMid slice",
+		},
+	};
+
 	return (
 		<div className="absolute top-[30px]">
-			<Lottie animationData={animationData} loop={true} autoplay className="translate-x-[24px] translate-y-[3 0px]" />
+			<Lottie {...defaultOptions} loop={true} autoplay className="translate-x-[24px] translate-y-[3 0px]" />
 		</div>
 	);
 };

src/app/components/lottieAnims/Anim3.tsx

@@ -1,12 +1,37 @@
 "use client";
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Lottie from "lottie-react";
 const ABData = "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/lottie-json/AB.json";
 
 const Anim1 = () => {
+	const [animationData, setAnimationData] = useState(null);
+
+	useEffect(() => {
+		// 使用 fetch 加载 JSON 数据
+		fetch(ABData)
+			.then((response) => {
+				if (!response.ok) {
+					throw new Error("Failed to load animation data");
+				}
+				return response.json();
+			})
+			.then((data) => {
+				setAnimationData(data); // 设置动画数据
+			});
+	}, []);
+
+	// Lottie 配置
+	const defaultOptions = {
+		loop: true,
+		autoplay: true,
+		animationData: animationData, // 使用远程加载的 JSON 数据
+		rendererSettings: {
+			preserveAspectRatio: "xMidYMid slice",
+		},
+	};
 	return (
 		<div className="absolute right-[-100px] w-[888px]">
-			<Lottie animationData={ABData} loop={true} autoplay className="translate-x-[-93px] translate-y-[-12px]" />
+			<Lottie {...defaultOptions} loop={true} autoplay className="translate-x-[-93px] translate-y-[-12px]" />
 		</div>
 	);
 };

src/app/components/lottieAnims/LightWeight.tsx

@@ -1,12 +1,37 @@
 "use client";
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Lottie from "lottie-react";
 const LightWeight = "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/lottie-json/LightWeight.json";
 
 const LightWeightAnim = () => {
+	const [animationData, setAnimationData] = useState(null);
+
+	useEffect(() => {
+		// 使用 fetch 加载 JSON 数据
+		fetch(LightWeight)
+			.then((response) => {
+				if (!response.ok) {
+					throw new Error("Failed to load animation data");
+				}
+				return response.json();
+			})
+			.then((data) => {
+				setAnimationData(data); // 设置动画数据
+			});
+	}, []);
+
+	// Lottie 配置
+	const defaultOptions = {
+		loop: true,
+		autoplay: true,
+		animationData: animationData, // 使用远程加载的 JSON 数据
+		rendererSettings: {
+			preserveAspectRatio: "xMidYMid slice",
+		},
+	};
 	return (
 		<div className="absolute w-[908px] h-[356px] left-[-40px] top-[-30px]">
-			<Lottie animationData={LightWeight} loop={true} autoplay style={{ transform: "scale(0.98) translate(10px, 0)" }} />
+			<Lottie {...defaultOptions} loop={true} autoplay style={{ transform: "scale(0.98) translate(10px, 0)" }} />
 		</div>
 	);
 };

src/app/components/lottieAnims/MultiChannel.tsx

@@ -1,12 +1,38 @@
 "use client";
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Lottie from "lottie-react";
 const MultiChannl = "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/lottie-json/MultiChannl.json";
 
 const Anim1 = () => {
+	const [animationData, setAnimationData] = useState(null);
+
+	useEffect(() => {
+		// 使用 fetch 加载 JSON 数据
+		fetch(MultiChannl)
+			.then((response) => {
+				if (!response.ok) {
+					throw new Error("Failed to load animation data");
+				}
+				return response.json();
+			})
+			.then((data) => {
+				setAnimationData(data); // 设置动画数据
+			});
+	}, []);
+
+	// Lottie 配置
+	const defaultOptions = {
+		loop: true,
+		autoplay: true,
+		animationData: animationData, // 使用远程加载的 JSON 数据
+		rendererSettings: {
+			preserveAspectRatio: "xMidYMid slice",
+		},
+	};
+
 	return (
 		<div className="absolute right-0 w-[742px] h-[317px]">
-			<Lottie animationData={MultiChannl} loop={true} autoplay style={{ transform: "translate(-45px, 4px)" }} />
+			<Lottie {...defaultOptions} loop={true} autoplay style={{ transform: "translate(-45px, 4px)" }} />
 		</div>
 	);
 };

src/app/components/lottieAnims/MultiLanguage.tsx

@@ -1,12 +1,37 @@
 "use client";
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Lottie from "lottie-react";
 const MultiLanguage = "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/lottie-json/MultiLanguage.json";
 
 const Anim1 = () => {
+	const [animationData, setAnimationData] = useState(null);
+
+	useEffect(() => {
+		fetch(MultiLanguage)
+			.then((response) => {
+				if (!response.ok) {
+					throw new Error("Failed to load animation data");
+				}
+				return response.json();
+			})
+			.then((data) => {
+				setAnimationData(data);
+			});
+	}, []);
+
+	// Lottie 配置
+	const defaultOptions = {
+		loop: true,
+		autoplay: true,
+		animationData: animationData,
+		rendererSettings: {
+			preserveAspectRatio: "xMidYMid slice",
+		},
+	};
+
 	return (
 		<div className="absolute w-[731px] left-[-33px] top-[-20px]">
-			<Lottie animationData={MultiLanguage} loop={true} autoplay style={{ transform: "translate(35px, 74px)" }} />
+			<Lottie {...defaultOptions} loop={true} autoplay style={{ transform: "translate(35px, 74px)" }} />
 		</div>
 	);
 };

src/app/globals.css

@@ -169,3 +169,22 @@ html {
 		justify-content: center;
 	}
 }
+
+/* 优化图片加载 */
+img {
+  content-visibility: auto;
+}
+
+/* 添加渐入动画 */
+.fade-in {
+  animation: fadeIn 0.3s ease-in;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

src/app/layout.tsx

@@ -15,6 +15,12 @@ function RootLayout({ children }: { children: ReactNode }): ReactElement {
 		<html lang="zh">
 			<head>
 				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<link 
+					rel="preload" 
+					href="https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/lottie-json/logoAnim.json" 
+					as="fetch" 
+					crossOrigin="anonymous" 
+				/>
 				<meta name="baidu-site-verification" content="codeva-ET8AOZwhkG" />
 				<meta name="sogou_site_verification" content="5WfNfjHc6j" />
 				<meta name="360-site-verification" content="c2f6de2ca12d108936ee7a52fcbf72dc" />
@@ -49,8 +55,9 @@ function RootLayout({ children }: { children: ReactNode }): ReactElement {
               `,
 					}}
 				/>
+				{/* 延迟加载非关键脚本 */}
+				<script defer src="https://www.googletagmanager.com/gtag/js?id=G-3VNFGQNP7Z"></script>
 				{/* google Analytics */}
-				<script async src="https://www.googletagmanager.com/gtag/js?id=G-3VNFGQNP7Z"></script>
 				<script
 					dangerouslySetInnerHTML={{
 						__html: `