Skip to content

Commit e4a39e1

Browse files
liyitang22liyitang22
committed
up
1 parent 23f545f commit e4a39e1

File tree

1 file changed

+105
-63
lines changed

1 file changed

+105
-63
lines changed

‎index.html‎

Lines changed: 105 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1379,56 +1379,83 @@
13791379
restoreVideoSources();
13801380

13811381
// Load non-critical CSS and KaTeX after hero video is ready
1382-
console.log('📚 Loading non-critical CSS and KaTeX after hero video is ready...');
1383-
1384-
// Load non-critical CSS files (carousel, slider, icons)
1385-
const nonCriticalCSS = [
1386-
'./static/css/bulma-carousel.min.css',
1387-
'./static/css/bulma-slider.min.css',
1388-
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css',
1389-
'https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css'
1390-
];
1391-
1392-
nonCriticalCSS.forEach(cssUrl => {
1393-
const link = document.createElement('link');
1394-
link.rel = 'stylesheet';
1395-
link.href = cssUrl;
1396-
document.head.appendChild(link);
1397-
});
1382+
// Use requestIdleCallback to delay loading until browser is idle
1383+
const loadNonCriticalResources = () => {
1384+
console.log('📚 Loading non-critical CSS and KaTeX after hero video is ready...');
1385+
1386+
// Load non-critical CSS files (carousel, slider, icons) with delay
1387+
const nonCriticalCSS = [
1388+
'./static/css/bulma-carousel.min.css',
1389+
'./static/css/bulma-slider.min.css',
1390+
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css',
1391+
'https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css'
1392+
];
1393+
1394+
// Stagger CSS loading to avoid blocking
1395+
nonCriticalCSS.forEach((cssUrl, index) => {
1396+
setTimeout(() => {
1397+
const link = document.createElement('link');
1398+
link.rel = 'stylesheet';
1399+
link.href = cssUrl;
1400+
document.head.appendChild(link);
1401+
}, index * 200); // 200ms delay between each CSS file
1402+
});
1403+
};
13981404

1399-
// Load KaTeX CSS (original CSS needed for proper math rendering)
1400-
const katexCSS = document.createElement('link');
1401-
katexCSS.rel = 'stylesheet';
1402-
katexCSS.href = 'https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css';
1403-
document.head.appendChild(katexCSS);
1405+
// Delay non-critical resources loading
1406+
if ('requestIdleCallback' in window) {
1407+
requestIdleCallback(loadNonCriticalResources, { timeout: 2000 });
1408+
} else {
1409+
setTimeout(loadNonCriticalResources, 1000);
1410+
}
14041411

1405-
// Load KaTeX JS
1406-
const katexJS = document.createElement('script');
1407-
katexJS.src = 'https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js';
1408-
katexJS.defer = true;
1409-
katexJS.onload = function() {
1410-
// Load auto-render after main KaTeX is loaded
1411-
const autoRenderJS = document.createElement('script');
1412-
autoRenderJS.src = 'https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/contrib/auto-render.min.js';
1413-
autoRenderJS.defer = true;
1414-
autoRenderJS.onload = function() {
1415-
// Initialize KaTeX rendering (using system fonts, no external font loading)
1416-
if (typeof renderMathInElement !== 'undefined') {
1417-
renderMathInElement(document.body, {
1418-
delimiters: [
1419-
{left: '$$', right: '$$', display: true},
1420-
{left: '$', right: '$', display: false},
1421-
{left: '\\[', right: '\\]', display: true},
1422-
{left: '\\(', right: '\\)', display: false}
1423-
],
1424-
throwOnError: false
1425-
});
1426-
console.log('✅ KaTeX loaded and initialized (using system fonts, no external font loading)');
1427-
}
1428-
};
1429-
document.head.appendChild(autoRenderJS);
1412+
// Load KaTeX CSS and JS with delay - only load when needed
1413+
const loadKaTeX = () => {
1414+
// Load KaTeX CSS (original CSS needed for proper math rendering)
1415+
const katexCSS = document.createElement('link');
1416+
katexCSS.rel = 'stylesheet';
1417+
katexCSS.href = 'https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css';
1418+
document.head.appendChild(katexCSS);
1419+
1420+
// Load KaTeX JS with delay
1421+
setTimeout(() => {
1422+
const katexJS = document.createElement('script');
1423+
katexJS.src = 'https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js';
1424+
katexJS.defer = true;
1425+
katexJS.onload = function() {
1426+
// Load auto-render after main KaTeX is loaded
1427+
setTimeout(() => {
1428+
const autoRenderJS = document.createElement('script');
1429+
autoRenderJS.src = 'https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/contrib/auto-render.min.js';
1430+
autoRenderJS.defer = true;
1431+
autoRenderJS.onload = function() {
1432+
// Initialize KaTeX rendering (using system fonts, no external font loading)
1433+
if (typeof renderMathInElement !== 'undefined') {
1434+
renderMathInElement(document.body, {
1435+
delimiters: [
1436+
{left: '$$', right: '$$', display: true},
1437+
{left: '$', right: '$', display: false},
1438+
{left: '\\[', right: '\\]', display: true},
1439+
{left: '\\(', right: '\\)', display: false}
1440+
],
1441+
throwOnError: false
1442+
});
1443+
console.log('✅ KaTeX loaded and initialized (using system fonts, no external font loading)');
1444+
}
1445+
};
1446+
document.head.appendChild(autoRenderJS);
1447+
}, 500);
1448+
};
1449+
document.head.appendChild(katexJS);
1450+
}, 1000);
14301451
};
1431-
document.head.appendChild(katexJS);
1452+
1453+
// Delay KaTeX loading even more - only when user scrolls or after longer delay
1454+
if ('requestIdleCallback' in window) {
1455+
requestIdleCallback(loadKaTeX, { timeout: 3000 });
1456+
} else {
1457+
setTimeout(loadKaTeX, 2000);
1458+
}
14321459
};
14331460

14341461
if (window.heroVideoLoaded) {
@@ -2671,17 +2698,26 @@
26712698
if (video.closest('.gallery-item') || video.hasAttribute('controls')) {
26722699
// Calculate delay based on video position to stagger loading
26732700
const videoIndex = Array.from(document.querySelectorAll('video')).indexOf(video);
2674-
const delay = Math.min((videoIndex % 5) * 500, 2000); // Stagger by 500ms per video, max 2s
2701+
const delay = Math.min((videoIndex % 3) * 800, 3000); // Stagger by 800ms per video, max 3s
26752702

2676-
setTimeout(() => {
2703+
// Use requestIdleCallback if available for better performance
2704+
const scheduleLoad = (callback) => {
2705+
if ('requestIdleCallback' in window) {
2706+
requestIdleCallback(callback, { timeout: 3000 });
2707+
} else {
2708+
setTimeout(callback, delay);
2709+
}
2710+
};
2711+
2712+
scheduleLoad(() => {
26772713
if (entry.isIntersecting && window.heroVideoLoaded && video.readyState <= 1) {
26782714
// Only upgrade to auto if video is still in viewport and not already loading fully
26792715
video.preload = 'auto';
26802716
if (video.readyState <= 1) {
26812717
video.load();
26822718
}
26832719
}
2684-
}, 2000 + delay); // Base 2s delay + staggered delay
2720+
});
26852721
}
26862722

26872723
// Start auto-play if it's a gallery video
@@ -2703,7 +2739,7 @@
27032739
}
27042740
});
27052741
}, {
2706-
rootMargin: '200px' // Larger margin for better UX
2742+
rootMargin: '400px' // Reduced margin - only load when closer to viewport
27072743
});
27082744

27092745
// Observe all videos except hero videos (after delay)
@@ -2812,7 +2848,7 @@
28122848
} else if (connection.effectiveType === '3g') {
28132849
performanceMetrics.maxConcurrentLoads = 1;
28142850
} else {
2815-
performanceMetrics.maxConcurrentLoads = 2; // Reduced from 3 to 2
2851+
performanceMetrics.maxConcurrentLoads = 1; // Further reduced to 1 for better performance
28162852
}
28172853
}
28182854

@@ -2838,7 +2874,10 @@
28382874
performanceMetrics.loadedVideos++;
28392875
updateLoadingState();
28402876
console.log('Video loaded successfully:', video.src);
2841-
processVideoQueue();
2877+
// Add delay before processing next video to prevent network overload
2878+
setTimeout(() => {
2879+
processVideoQueue();
2880+
}, 500);
28422881
}, { once: true });
28432882

28442883
video.addEventListener('error', () => {
@@ -2847,7 +2886,10 @@
28472886
performanceMetrics.failedVideos++;
28482887
updateLoadingState();
28492888
console.log('Video loading error:', video.src);
2850-
processVideoQueue();
2889+
// Add delay before processing next video
2890+
setTimeout(() => {
2891+
processVideoQueue();
2892+
}, 300);
28512893
}, { once: true });
28522894

28532895
if (video.dataset.src && !video.src) {
@@ -3559,7 +3601,7 @@ <h4 style="text-align: center; margin-bottom: 15px; font-family: var(--font-sans
35593601
Your browser does not support the video tag.
35603602
</video>
35613603
<div class="video-info">
3562-
<h4 style="font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif); font-size: 0.9em;">Target: T-Pose <img src="./resources/tpose.png" alt="T-Pose" style="width: 51px; height: auto; vertical-align: middle; margin-left: 5px;"></h4>
3604+
<h4 style="font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif); font-size: 0.9em;">Target: T-Pose <img src="./resources/tpose.png" alt="T-Pose" loading="lazy" style="width: 51px; height: auto; vertical-align: middle; margin-left: 5px;"></h4>
35633605
<p style="font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif); font-size: 0.85em;">BFM-Zero enables a natural and smooth transition from the ground to T-Pose.</p>
35643606
</div>
35653607
</div>
@@ -3571,7 +3613,7 @@ <h4 style="font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Seg
35713613
Your browser does not support the video tag.
35723614
</video>
35733615
<div class="video-info">
3574-
<h4 style="font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif); font-size: 0.9em;">Target: T-Pose <img src="./resources/tpose.png" alt="T-Pose" style="width: 51px; height: auto; vertical-align: middle; margin-left: 5px;"></h4>
3616+
<h4 style="font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif); font-size: 0.9em;">Target: T-Pose <img src="./resources/tpose.png" alt="T-Pose" loading="lazy" style="width: 51px; height: auto; vertical-align: middle; margin-left: 5px;"></h4>
35753617
<p style="font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif); font-size: 0.85em;">A brief running-like adjustment occurs before achieving full stability.</p>
35763618
</div>
35773619
</div>
@@ -3583,7 +3625,7 @@ <h4 style="font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Seg
35833625
Your browser does not support the video tag.
35843626
</video>
35853627
<div class="video-info">
3586-
<h4 style="font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif); font-size: 0.9em;">Target: Hands-on-hips posture <img src="./resources/pose.png" alt="Pose" style="width: 30px; height: auto; vertical-align: middle; margin-left: 5px;"></h4>
3628+
<h4 style="font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif); font-size: 0.9em;">Target: Hands-on-hips posture <img src="./resources/pose.png" alt="Pose" loading="lazy" style="width: 30px; height: auto; vertical-align: middle; margin-left: 5px;"></h4>
35873629
<p style="font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif); font-size: 0.85em;">Smooth and natural transitions to Hands-on-hips posture.</p>
35883630
</div>
35893631
</div>
@@ -3595,7 +3637,7 @@ <h4 style="font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Seg
35953637
Your browser does not support the video tag.
35963638
</video>
35973639
<div class="video-info">
3598-
<h4 style="font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif); font-size: 0.9em;">Target: Hands-on-hips posture <img src="./resources/pose.png" alt="Pose" style="width: 30px; height: auto; vertical-align: middle; margin-left: 5px;"></h4>
3640+
<h4 style="font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif); font-size: 0.9em;">Target: Hands-on-hips posture <img src="./resources/pose.png" alt="Pose" loading="lazy" style="width: 30px; height: auto; vertical-align: middle; margin-left: 5px;"></h4>
35993641
<p style="font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif); font-size: 0.85em;">Rapid stabilization occurs when the initial stand-up is unsteady.</p>
36003642
</div>
36013643
</div>
@@ -3607,7 +3649,7 @@ <h4 style="font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Seg
36073649
Your browser does not support the video tag.
36083650
</video>
36093651
<div class="video-info">
3610-
<h4 style="font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif); font-size: 0.9em;">Target: Hands-on-hips posture <img src="./resources/pose.png" alt="Pose" style="width: 30px; height: auto; vertical-align: middle; margin-left: 5px;"></h4>
3652+
<h4 style="font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif); font-size: 0.9em;">Target: Hands-on-hips posture <img src="./resources/pose.png" alt="Pose" loading="lazy" style="width: 30px; height: auto; vertical-align: middle; margin-left: 5px;"></h4>
36113653
<p style="font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif); font-size: 0.85em;">Successfully recovers even after the first failed attempt to stand.</p>
36123654
</div>
36133655
</div>
@@ -3619,7 +3661,7 @@ <h4 style="font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Seg
36193661
Your browser does not support the video tag.
36203662
</video>
36213663
<div class="video-info">
3622-
<h4 style="font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif); font-size: 0.9em;">Target: Hands-on-hips posture <img src="./resources/pose.png" alt="Pose" style="width: 30px; height: auto; vertical-align: middle; margin-left: 5px;"></h4>
3664+
<h4 style="font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif); font-size: 0.9em;">Target: Hands-on-hips posture <img src="./resources/pose.png" alt="Pose" loading="lazy" style="width: 30px; height: auto; vertical-align: middle; margin-left: 5px;"></h4>
36233665
<p style="font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif); font-size: 0.85em;">If the initial pose is not natural, it prioritizes standing up quickly before fine adjustments.</p>
36243666
</div>
36253667
</div>
@@ -3631,7 +3673,7 @@ <h4 style="font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Seg
36313673
Your browser does not support the video tag.
36323674
</video>
36333675
<div class="video-info">
3634-
<h4 style="font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif); font-size: 0.9em;">Target: Hands-on-hips posture <img src="./resources/pose.png" alt="Pose" style="width: 30px; height: auto; vertical-align: middle; margin-left: 5px;"></h4>
3676+
<h4 style="font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif); font-size: 0.9em;">Target: Hands-on-hips posture <img src="./resources/pose.png" alt="Pose" loading="lazy" style="width: 30px; height: auto; vertical-align: middle; margin-left: 5px;"></h4>
36353677
<p style="font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif); font-size: 0.85em;">Besides, BFM-Zero maintains a high rate of efficient goal reaching...</p>
36363678
</div>
36373679
</div>
@@ -3643,7 +3685,7 @@ <h4 style="font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Seg
36433685
Your browser does not support the video tag.
36443686
</video>
36453687
<div class="video-info">
3646-
<h4 style="font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif); font-size: 0.9em;">Target: Hands-on-hips posture <img src="./resources/pose.png" alt="Pose" style="width: 30px; height: auto; vertical-align: middle; margin-left: 5px;"></h4>
3688+
<h4 style="font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif); font-size: 0.9em;">Target: Hands-on-hips posture <img src="./resources/pose.png" alt="Pose" loading="lazy" style="width: 30px; height: auto; vertical-align: middle; margin-left: 5px;"></h4>
36473689
<p style="font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif); font-size: 0.85em;">...a high rate of efficient goal reaching...</p>
36483690
</div>
36493691
</div>
@@ -3655,7 +3697,7 @@ <h4 style="font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Seg
36553697
Your browser does not support the video tag.
36563698
</video>
36573699
<div class="video-info">
3658-
<h4 style="font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif); font-size: 0.9em;">Target: Hands-on-hips posture <img src="./resources/pose.png" alt="Pose" style="width: 30px; height: auto; vertical-align: middle; margin-left: 5px;"></h4>
3700+
<h4 style="font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif); font-size: 0.9em;">Target: Hands-on-hips posture <img src="./resources/pose.png" alt="Pose" loading="lazy" style="width: 30px; height: auto; vertical-align: middle; margin-left: 5px;"></h4>
36593701
<p style="font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif); font-size: 0.85em;">...a high rate of efficient goal reaching.</p>
36603702
</div>
36613703
</div>

0 commit comments

Comments
 (0)