diff --git a/src/app/[[...lang]]/page.tsx b/src/app/[[...lang]]/page.tsx index 7334e99..72e3889 100644 --- a/src/app/[[...lang]]/page.tsx +++ b/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"; diff --git a/src/app/components/lottieAnims/Anim1.tsx b/src/app/components/lottieAnims/Anim1.tsx index b6ba9ed..1eedb5d 100644 --- a/src/app/components/lottieAnims/Anim1.tsx +++ b/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 (
- +
); }; diff --git a/src/app/components/lottieAnims/Anim2.tsx b/src/app/components/lottieAnims/Anim2.tsx index f7aaaf4..c0ecc47 100644 --- a/src/app/components/lottieAnims/Anim2.tsx +++ b/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 (
- +
); }; diff --git a/src/app/components/lottieAnims/Anim3.tsx b/src/app/components/lottieAnims/Anim3.tsx index d67800e..0c4d523 100644 --- a/src/app/components/lottieAnims/Anim3.tsx +++ b/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 (
- +
); }; diff --git a/src/app/components/lottieAnims/LightWeight.tsx b/src/app/components/lottieAnims/LightWeight.tsx index 45267fe..243d2ce 100644 --- a/src/app/components/lottieAnims/LightWeight.tsx +++ b/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 (
- +
); }; diff --git a/src/app/components/lottieAnims/MultiChannel.tsx b/src/app/components/lottieAnims/MultiChannel.tsx index 8644bfc..dbb479e 100644 --- a/src/app/components/lottieAnims/MultiChannel.tsx +++ b/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 (
- +
); }; diff --git a/src/app/components/lottieAnims/MultiLanguage.tsx b/src/app/components/lottieAnims/MultiLanguage.tsx index b35754d..efa107a 100644 --- a/src/app/components/lottieAnims/MultiLanguage.tsx +++ b/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 (
- +
); }; diff --git a/src/app/globals.css b/src/app/globals.css index d04d11b..cd1a1fd 100644 --- a/src/app/globals.css +++ b/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; + } +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 7fd2b66..40e2ef2 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -15,6 +15,12 @@ function RootLayout({ children }: { children: ReactNode }): ReactElement { + @@ -49,8 +55,9 @@ function RootLayout({ children }: { children: ReactNode }): ReactElement { `, }} /> + {/* 延迟加载非关键脚本 */} + {/* google Analytics */} -