forked from 77media/video-flow
优化 首页加载速度
This commit is contained in:
北枳
parent
237b8b4389
commit
72b4c11d80
@ -1,13 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useRef, useEffect, useMemo } from "react";
|
||||
import {
|
||||
Table,
|
||||
AlignHorizontalSpaceAround,
|
||||
Loader2,
|
||||
Clapperboard,
|
||||
CircleArrowRight,
|
||||
} from "lucide-react";
|
||||
import "./style/home-page2.css";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
@ -21,19 +14,9 @@ import {
|
||||
EffectCube,
|
||||
Pagination,
|
||||
} from "swiper/modules";
|
||||
import LazyLoad, { forceCheck } from "react-lazyload";
|
||||
|
||||
|
||||
import { VideoCarouselLayout } from "@/components/video-carousel-layout";
|
||||
import { VideoGridLayout } from "@/components/video-grid-layout";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { LiquidButton } from "@/components/ui/liquid-glass-button";
|
||||
import {
|
||||
createScriptProject,
|
||||
CreateScriptProjectRequest,
|
||||
} from "@/api/script_project";
|
||||
import { ProjectTypeEnum, ModeEnum, ResolutionEnum } from "@/app/model/enums";
|
||||
import { getResourcesList, Resource } from "@/api/resources";
|
||||
import { Carousel } from "antd";
|
||||
import { TextCanvas } from "../common/TextCanvas";
|
||||
import { fetchSubscriptionPlans, SubscriptionPlan } from "@/lib/stripe";
|
||||
import { useCallbackModal } from "@/app/layout";
|
||||
|
||||
@ -151,15 +134,15 @@ function useVideoPreloader() {
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// 使用 requestIdleCallback 在浏览器空闲时开始预加载
|
||||
// 如果浏览器不支持，则使用 setTimeout 延迟执行
|
||||
if (typeof requestIdleCallback !== "undefined") {
|
||||
requestIdleCallback(() => preloadAllVideos(), { timeout: 2000 });
|
||||
} else {
|
||||
setTimeout(() => preloadAllVideos(), 100);
|
||||
}
|
||||
}, []);
|
||||
// useEffect(() => {
|
||||
// // 使用 requestIdleCallback 在浏览器空闲时开始预加载
|
||||
// // 如果浏览器不支持，则使用 setTimeout 延迟执行
|
||||
// if (typeof requestIdleCallback !== "undefined") {
|
||||
// requestIdleCallback(() => preloadAllVideos(), { timeout: 2000 });
|
||||
// } else {
|
||||
// setTimeout(() => preloadAllVideos(), 100);
|
||||
// }
|
||||
// }, []);
|
||||
|
||||
// 这个 hook 不需要返回任何值，它只是后台静默运行
|
||||
return;
|
||||
@ -176,9 +159,15 @@ export function HomePage2() {
|
||||
style={{ paddingBottom: `2rem` }}
|
||||
>
|
||||
<HomeModule1 />
|
||||
<HomeModule2 />
|
||||
<HomeModule3 />
|
||||
<HomeModule4 />
|
||||
<LazyLoad once>
|
||||
<HomeModule2 />
|
||||
</LazyLoad>
|
||||
<LazyLoad once>
|
||||
<HomeModule3 />
|
||||
</LazyLoad>
|
||||
<LazyLoad once>
|
||||
<HomeModule4 />
|
||||
</LazyLoad>
|
||||
<HomeModule5 />
|
||||
<HomeModule6 />
|
||||
</div>
|
||||
@ -204,20 +193,24 @@ function HomeModule1() {
|
||||
/* 大屏显示器适配 (27寸+) */
|
||||
2xl:h-[100vh] 2xl:pt-[22vh]"
|
||||
>
|
||||
<video
|
||||
src="https://cdn.qikongjian.com/1756549479451_ltrtoz.mp4"
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
className="absolute top-0 left-0 z-1 w-full h-full
|
||||
/* 移动端优化 */
|
||||
object-cover
|
||||
/* 平板及以上优化 */
|
||||
sm:object-cover
|
||||
/* 桌面端优化 */
|
||||
md:object-cover lg:object-cover xl:object-cover 2xl:object-cover"
|
||||
></video>
|
||||
<LazyLoad once>
|
||||
<video
|
||||
src="https://cdn.qikongjian.com/1756549479451_ltrtoz.mp4"
|
||||
poster="https://cdn.qikongjian.com/1756549479451_ltrtoz.mp4?vframe/jpg/offset/1"
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
preload="none"
|
||||
className="absolute top-0 left-0 z-1 w-full h-full
|
||||
/* 移动端优化 */
|
||||
object-cover
|
||||
/* 平板及以上优化 */
|
||||
sm:object-cover
|
||||
/* 桌面端优化 */
|
||||
md:object-cover lg:object-cover xl:object-cover 2xl:object-cover"
|
||||
></video>
|
||||
</LazyLoad>
|
||||
<div className="center z-10 flex flex-col items-center px-4">
|
||||
<h1
|
||||
className="text-white font-bold text-center
|
||||
@ -487,9 +480,11 @@ function HomeModule2() {
|
||||
>
|
||||
<video
|
||||
src={item.video}
|
||||
poster={`${item.video}?vframe/jpg/offset/1`}
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
preload="none"
|
||||
className={`object-cover border border-white/20 rounded-2xl w-full ${
|
||||
isMobile
|
||||
? "h-[12rem]"
|
||||
@ -703,10 +698,12 @@ function HomeModule3() {
|
||||
<div className="w-full h-[11rem] bg-gray-800 rounded-2xl overflow-hidden">
|
||||
<video
|
||||
src={video}
|
||||
poster={`${video}?vframe/jpg/offset/1`}
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
preload="none"
|
||||
className="w-full h-full object-cover"
|
||||
onMouseEnter={(e) => {
|
||||
const videoElement = e.currentTarget;
|
||||
@ -791,9 +788,11 @@ function HomeModule3() {
|
||||
<div className="w-full h-[19rem] bg-gray-800 rounded-2xl overflow-hidden aspect-[1/0.77]">
|
||||
<video
|
||||
src={video}
|
||||
poster={`${video}?vframe/jpg/offset/1`}
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
preload="none"
|
||||
className="w-full h-full object-cover aspect-[1/0.77]"
|
||||
onMouseEnter={(e) => {
|
||||
const videoElement = e.currentTarget;
|
||||
@ -915,10 +914,12 @@ function HomeModule4() {
|
||||
<video
|
||||
key={activeTab}
|
||||
src={processSteps[activeTab].video}
|
||||
poster={`${processSteps[activeTab].video}?vframe/jpg/offset/1`}
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
preload="none"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
@ -1070,10 +1071,12 @@ function HomeModule4() {
|
||||
<video
|
||||
key={activeTab}
|
||||
src={processSteps[activeTab].video}
|
||||
poster={`${processSteps[activeTab].video}?vframe/jpg/offset/1`}
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
preload="none"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
2948
package-lock.json
generated
2948
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -94,6 +94,7 @@
|
||||
"react-hook-form": "^7.53.0",
|
||||
"react-intersection-observer": "^9.16.0",
|
||||
"react-joyride": "^2.9.3",
|
||||
"react-lazyload": "^3.2.1",
|
||||
"react-markdown": "^10.1.0",
|
||||
"react-redux": "^9.2.0",
|
||||
"react-resizable": "^3.0.5",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user