Performance optimization：JavaScript Performance Optimization for Mobi…

…le Adaptation to Improve Page Responsiveness (higress-group#308)

src/components/home/HomeIntroduce.astro

@@ -11,9 +11,11 @@ const ifzh = isChinese(Astro);
 ---
 
 <div class="home-introduce-wrapper h-[65vh] relative">
-  <!-- 这里将原本的 <video> 替换为 <div>，并通过CSS来显示不同的内容 -->
+ <!-- Container for media elements -->
  <div class="media-container">
+ <!-- Video element, initially displayed on larger screens -->
  <video
+ id="background-video"
  autoplay
  muted
  loop
@@ -25,8 +27,10 @@ const ifzh = isChinese(Astro);
  type="video/mp4"
  />
  </video>
- <div class="image-background"></div>
+ <!-- Image element, initially hidden on larger screens -->
+ <div id="background-image" class="image-background"></div>
  </div>
+
  <div class="introduce flex flex-col justify-center items-center bg-transparent h-full relative z-1" >
  <div class="flex flex-col justify-center items-center h-[75%]">
  <div
@@ -91,20 +95,14 @@ const ifzh = isChinese(Astro);
  z-index: 0;
  }
 
- .video-background {
- width: 100%;
- height: 100%;
- object-fit: cover;
- display: block;
- }
-
- .image-background {
- width: 100%;
- height: 100%;
- background-image: url('https://img.alicdn.com/imgextra/i1/O1CN01U3PG171Wiz4B85TGK_!!6000000002823-0-tps-2388-1168.jpg');
- background-size: cover;
- display: none;
- }
+ .video-background, .image-background {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+ .image-background {
+ background-size: cover;
+ }
 
  .ai-description {
  background: linear-gradient(90deg, #6181ff 48%, #cac8fd 61%);
@@ -114,16 +112,6 @@ const ifzh = isChinese(Astro);
  -webkit-text-fill-color: transparent;
  }
 
- @media only screen and (max-width: 768px) {
- .video-background {
- display: none;
- }
-
- .image-background {
- display: block;
- }
- }
-
  .neutral-fill {
  color: theme("colors.neutral");
  }
@@ -261,3 +249,46 @@ const ifzh = isChinese(Astro);
  }
  }
 </style>
+
+<script>
+ // 当 DOM 内容完全加载并且解析完成时，执行回调函数
+ document.addEventListener('DOMContentLoaded', () => {
+ // 定义一个函数来更新媒体内容（视频或图片）
+ function updateMedia() {
+ // 获取具有 class 为 'media-container' 的元素
+ const mediaContainer = document.querySelector('.media-container');
+
+ // 检查当前窗口的宽度
+ if (window.innerWidth <= 768) {
+ // 如果窗口宽度小于或等于 768 像素（通常是移动设备），则插入图片
+ mediaContainer.innerHTML = `
+ <div id="background-image" class="image-background" 
+ style="background-image: url('https://img.alicdn.com/imgextra/i1/O1CN01U3PG171Wiz4B85TGK_!!6000000002823-0-tps-2388-1168.jpg');"></div>
+ `;
+ } else {
+ // 如果窗口宽度大于 768 像素（通常是 PC 端），则插入视频
+ mediaContainer.innerHTML = `
+ <video
+ id="background-video"
+ autoplay
+ muted
+ loop
+ class="video-background"
+ poster="https://img.alicdn.com/imgextra/i1/O1CN01U3PG171Wiz4B85TGK_!!6000000002823-0-tps-2388-1168.jpg"
+ >
+ <source
+ src="https://cloud.video.taobao.com/vod/play/V3VEOGxHS3IxSU5wWkFYeTFuZU4wdHJ2eXloK1g1aXlXV0pvNU0zVjhmYTZQZWw1SnpKVVVCTlh4OVFON0V5UUVMUDduY1RJak82VE1sdXdHTjNOaHc9PQ"
+ type="video/mp4"
+ />
+ </video>
+ `;
+ }
+ }
+
+ // 页面加载完成时，初次调用 updateMedia 函数以设置正确的媒体内容
+ updateMedia();
+
+ // 监听窗口大小变化事件，窗口大小变化时调用 updateMedia 函数
+ window.addEventListener('resize', updateMedia);
+ });
+</script>