feat: 新增视频卡片图片加载限制的相关设置，默认并发4，可以关闭

Author: keleus

src/_locales/cmn-CN.yml

@@ -278,6 +278,10 @@ settings:
   grid_columns: 显示
   grid_columns_unit: 列
   grid_add_breakpoint: 添加断点
+  enable_image_load_concurrency_limit: 启用图片加载并发限制
+  enable_image_load_concurrency_limit_desc: 限制同时加载的图片数量，减少页面卡顿
+  image_load_concurrency_count: 图片加载并发数
+  image_load_concurrency_count_desc: 同时加载图片的最大数量，可根据设备性能调整
 
   home_adaptive_title_auto_size: 标题字号自适应
   home_adaptive_title_auto_size_desc: 根据网格宽度自动调整标题字号

src/_locales/cmn-TW.yml

@@ -190,6 +190,10 @@ settings:
   grid_columns: 顯示
   grid_columns_unit: 列
   grid_add_breakpoint: 新增斷點
+  enable_image_load_concurrency_limit: 啟用圖片載入並行限制
+  enable_image_load_concurrency_limit_desc: 限制同時載入的圖片數量，減少頁面卡頓
+  image_load_concurrency_count: 圖片載入並行數
+  image_load_concurrency_count_desc: 同時載入圖片的最大數量，可依裝置效能調整
 
   home_adaptive_title_auto_size: 標題字級自適應
   home_adaptive_title_auto_size_desc: 依據網格寬度自動調整標題字級

src/_locales/en.yml

@@ -247,6 +247,10 @@ settings:
   grid_columns: Show
   grid_columns_unit: cols
   grid_add_breakpoint: Add Breakpoint
+  enable_image_load_concurrency_limit: Enable image load concurrency limit
+  enable_image_load_concurrency_limit_desc: Limit the number of images loading simultaneously to reduce page lag
+  image_load_concurrency_count: Image load concurrency
+  image_load_concurrency_count_desc: Maximum number of images to load at once, adjust based on device performance
 
   home_adaptive_title_auto_size: Auto adjust title font size
   home_adaptive_title_auto_size_desc: Adjusts title font size based on the grid width

src/_locales/jyut.yml

@@ -190,6 +190,10 @@ settings:
   grid_columns: 顯示
   grid_columns_unit: 列
   grid_add_breakpoint: 加斷點
+  enable_image_load_concurrency_limit: 啟用圖片載入並行限制
+  enable_image_load_concurrency_limit_desc: 限制同時載入嘅圖片數量，減少頁面窒
+  image_load_concurrency_count: 圖片載入並行數
+  image_load_concurrency_count_desc: 同時載入圖片嘅最大數量，可以根據裝置效能調整
 
   home_adaptive_title_auto_size: 標題字體大小自動
   home_adaptive_title_auto_size_desc: 根據網格闊度自動調整標題字體大小

src/components/LazyPicture.vue

@@ -3,11 +3,12 @@
  * 优化的懒加载图片组件
  * 使用 Intersection Observer API 实现精确的懒加载控制
  * 只在图片即将进入视口时才开始加载，减少不必要的网络请求
- * 通过全局队列限制并发加载数量
+ * 通过全局队列限制并发加载数量（可在设置中开关）
  */
 
 import { useGlobalScrollState } from '~/composables/useGlobalScrollState'
 import { enqueueImageLoad } from '~/composables/useImageLoadQueue'
+import { settings } from '~/logic'
 
 interface Props {
   src: string
@@ -50,6 +51,12 @@ function isInViewport(): boolean {
   return rect.top < window.innerHeight && rect.bottom > 0
 }
 
+// 直接加载图片（不经过队列）
+function loadDirectly() {
+  isVisible.value = true
+  actualSrc.value = props.src
+}
+
 // 开始加载图片（由队列调度）
 function startLoad() {
   // 再次检查是否在视口附近，不在则跳过
@@ -83,12 +90,17 @@ if (props.loading === 'eager') {
 // 使用全局共享的滚动状态
 const { isScrolling } = useGlobalScrollState()
 
-// 监听滚动停止，将待加载的图片加入队列
+// 监听滚动停止，将待加载的图片加入队列或直接加载
 watch(isScrolling, (scrolling) => {
   if (!scrolling && pendingLoad.value && !isVisible.value && !queueHandle) {
     pendingLoad.value = false
-    // 视口内的图片优先加载
-    queueHandle = enqueueImageLoad(startLoad, isInViewport())
+    if (settings.value.enableImageLoadConcurrencyLimit) {
+      // 视口内的图片优先加载
+      queueHandle = enqueueImageLoad(startLoad, isInViewport())
+    }
+    else {
+      loadDirectly()
+    }
   }
 })
 
@@ -103,10 +115,13 @@ onMounted(() => {
           if (isScrolling.value) {
             pendingLoad.value = true
           }
-          else {
+          else if (settings.value.enableImageLoadConcurrencyLimit) {
             // 视口内的图片优先加载
             queueHandle = enqueueImageLoad(startLoad, isInViewport())
           }
+          else {
+            loadDirectly()
+          }
           observer?.disconnect()
         }
       })

src/components/Settings/PluginComponentsAndPages/VideoCard/VideoCard.vue

@@ -122,6 +122,24 @@ function resetColumns() {
           </div>
         </template>
       </SettingsItem>
+
+      <SettingsItem :title="$t('settings.enable_image_load_concurrency_limit')" :desc="$t('settings.enable_image_load_concurrency_limit_desc')">
+        <Radio v-model="settings.enableImageLoadConcurrencyLimit" />
+      </SettingsItem>
+
+      <SettingsItem
+        v-if="settings.enableImageLoadConcurrencyLimit"
+        :title="$t('settings.image_load_concurrency_count')"
+        :desc="$t('settings.image_load_concurrency_count_desc')"
+      >
+        <Input
+          v-model="settings.imageLoadConcurrencyCount"
+          type="number"
+          :min="1"
+          :max="6"
+          w-20
+        />
+      </SettingsItem>
     </SettingsItemGroup>
 
     <SettingsItemGroup :title="$t('settings.group_video_card')">

src/components/VideoCardGrid.vue

@@ -401,7 +401,8 @@ const gridContainerStyle = computed(() => ({
 }))
 
 // 是否显示初始骨架屏（数据量不足阈值且还有更多内容时）
-const showInitialSkeleton = computed(() => {
+// 改为计算是否需要填充骨架屏，而不是完全切换
+const needSkeletonPadding = computed(() => {
   if (props.needToLoginFirst)
     return false
   if (props.noMoreContent)
@@ -411,14 +412,18 @@ const showInitialSkeleton = computed(() => {
   return true
 })
 
-// 生成初始骨架屏数据（仅用于首次加载）
-const initialSkeletonItems = computed(() => {
-  if (!showInitialSkeleton.value)
+// 生成填充骨架屏数据（填补到最小渲染数量）
+const paddingSkeletonItems = computed(() => {
+  if (!needSkeletonPadding.value)
     return []
 
-  return Array.from({ length: dynamicSkeletonCount.value }, (_, i) => ({
+  const currentCount = props.items.length
+  const targetCount = dynamicSkeletonCount.value
+  const paddingCount = Math.max(0, targetCount - currentCount)
+
+  return Array.from({ length: paddingCount }, (_, i) => ({
     _isSkeleton: true,
-    _skeletonId: `skeleton-init-${i}`,
+    _skeletonId: `skeleton-padding-${i}`,
   })) as T[]
 })
 
@@ -443,6 +448,11 @@ const loadingMoreSkeletonItems = computed(() => {
 
 // 合并实际数据和骨架屏
 const displayItems = computed(() => {
+  // 数据不足时：数据 + 填充骨架屏
+  if (needSkeletonPadding.value) {
+    return [...props.items, ...paddingSkeletonItems.value]
+  }
+
   // 加载更多时：数据 + 骨架屏
   if (isLoadingMore.value) {
     return [...props.items, ...loadingMoreSkeletonItems.value]
@@ -616,22 +626,8 @@ function getUniqueKey(item: T, index: number): string | number {
       m="b-0 t-0" relative w-full
       :style="gridContainerStyle"
     >
-      <!-- 初始加载骨架屏 -->
-      <div v-if="showInitialSkeleton" :class="gridClass">
-        <VideoCard
-          v-for="item in initialSkeletonItems"
-          :key="(item as any)._skeletonId"
-          skeleton
-          :horizontal="isHorizontal"
-        >
-          <template v-for="(_, name) in $slots" #[name]>
-            <slot :name="name" :item="item" />
-          </template>
-        </VideoCard>
-      </div>
-
-      <!-- Grid 内容 -->
-      <div v-else :class="gridClass">
+      <!-- Grid 内容（统一渲染，避免 v-if/v-else 切换导致的滚动跳动） -->
+      <div :class="gridClass">
         <VideoCard
           v-for="(item, index) in displayItems"
           :key="getUniqueKey(item, index)"

src/composables/useImageLoadQueue.ts

@@ -2,8 +2,11 @@
  * 全局图片加载队列（单例模式）
  * 限制同时加载的图片数量，避免并发过高
  * 支持优先级：视口内的图片优先加载
+ * 并发数可通过设置调整
  */
 
+import { settings } from '~/logic'
+
 type LoadCallback = () => void
 
 interface QueueItem {
@@ -14,10 +17,15 @@ interface QueueItem {
 // 全局状态（单例）
 const queue: QueueItem[] = []
 const loading = new Set<symbol>()
-const MAX_CONCURRENT = 4
+
+function getMaxConcurrent(): number {
+  const count = settings.value.imageLoadConcurrencyCount
+  return Math.max(1, Math.min(6, count || 4))
+}
 
 function processQueue() {
-  while (loading.size < MAX_CONCURRENT && queue.length > 0) {
+  const maxConcurrent = getMaxConcurrent()
+  while (loading.size < maxConcurrent && queue.length > 0) {
     const item = queue.shift()
     if (item) {
       loading.add(item.id)

src/logic/storage.ts

@@ -267,6 +267,9 @@ export interface Settings {
   // Video card shadow customization (modern layout only)
   videoCardShadowCurve: ShadowCurvePoint[]
   videoCardShadowHeight: number // 1.0-3.0
+  // Image load concurrency limit
+  enableImageLoadConcurrencyLimit: boolean
+  imageLoadConcurrencyCount: number // 1-6
   useSearchPageModeOnHomePage: boolean
   searchPageModeWallpaperFixed: boolean
   preserveForYouState: boolean
@@ -470,6 +473,8 @@ export const originalSettings: Settings = {
     { position: 100, opacity: 0 },
   ],
   videoCardShadowHeight: 1.0,
+  enableImageLoadConcurrencyLimit: true,
+  imageLoadConcurrencyCount: 4,
   useSearchPageModeOnHomePage: false,
   searchPageModeWallpaperFixed: false,
   preserveForYouState: false,