Lazy load for files

[hugo529100]

有沒有可能增添一個功能或者插件，使得Shared files頁面裏面增加一個功能：自動在文件夾裏面生成當前文件夾所有文件的列表的index.html ，并且優先讀取該文件。

因爲這樣可以大幅提高頁面的瀏覽速度，并且大幅降低對硬盤的讀取次數和負擔，因爲儅我在進入一個大於100K+文件數的文件夾的時候，HFS會進入短暫的癱瘓狀態，持續30秒甚至更多，而且返回目錄再進入就會再次陷入癱瘓，這樣對一些多文件的文件夾使用似乎有點不太方便。

Translate：

Is it possible to add a feature or plugin that automatically generates an index.html file to listing all the files in the current folder,that the funtion in the “Shared files” page, and prioritizes reading that index file? and even refresh if size or time chage.

This would significantly improve the browsing speed of the page and greatly reduce the number of read operations and the burden on the hard drive.

When I enter a folder with more than 100K+ files, HFS goes into a brief state of paralysis, lasting 30 seconds or more, and returning to the directory and re-entering causes it to freeze again. This makes it somewhat inconvenient to use folders with many files.

[rejetto]

generating such file is not in the scope of the project, but you can do it yourself, then hfs will use it.
the freezing is not supposed to happen. What i can do is to try to understand what's causing the freeze.
did you try clicking the "pause all plugins" button?

[hugo529100]

freezing is when reading files list when too much ,just laging slow means...
AH I try it for AI coding~~~~
thanks bro

[rejetto]

i understood what freezing is, i said it's not supposed to happen.
i have a folder with 70k+ files and it takes 2.5 seconds to start getting files

what version do you have?

[hugo529100]

0.56.0 beta6
always fllow up your update ~

ah~yes if too much loading it laging , or maybe use superfast ”Solid State Drive“ could better

[rejetto]

i think i know why it's happening.
i need to work on it

[hugo529100]

I trying to use AI coding a lazyload for the custom html

[rejetto]

the test above was made with my fast machine,
but i made the same test on a much slower machine with external HDD (no SSD), and the "freeze" is still roughly 2 seconds, just the list is much slower, as expected: 26 seconds instead of 12.
So, we still don't know why it's taking 30 seconds on your computer.

Nonetheless, i could work even on those 2 seconds.
After my changes, the same folder above, but now the "waiting" is 0.2s (both on the fast and the slow computer)

The total is not improved, but look faster because starts before.

[hugo529100]

omg maybe my hardisk going tomb now 🤣(need new HDD )
30second just feel not the actual measuring ，but it actual slow in a moment just .
it freeze when other cellphone or computer visit the server (means)

[rejetto]

it doesn't matter if it is 30 seconds or 20.
what browser do you use on your computer? i need you to give me the same screenshot that i posted. It's in the "network" section of the dev-tools. I can guide you if you tell me what browser you use.
In that section there are many requests, the one that i'm interested in is "get_file_list".

[hugo529100]

I try

[hugo529100]

[hugo529100]

[hugo529100]

I just make some webside copy in local network ,but the files too much , tnen laging if i go inside when i search some pages

[rejetto]

ok thank you.
i see in your last screenshot that the request started receiving data quickly, even if getting all the data took long.

this means that your "freezing" is not related to that.
at this point i have no idea of what you are experiencing. It would be helpful to see a video of your hfs freezing.

you didn't answer this question:

did you try clicking the "pause all plugins" button?

[hugo529100]

Screenrecorder-2025-02-08-00-02-15-650.mp4

ah try to record that

[hugo529100]

[hugo529100]

may split the files in different folder better i think ……too much the files

[rejetto]

ok, thanks for the video.
surely it's not the plugins.
i wonder if it could be some option.
can you show me your configuration, so that i can think of something?
admin-panel > options > file > copy without passwords

may split the files in different folder better i think ……too much the files

it's up to you.
i'd be glad to understand why it's happening to you.
i don't think it's only the number of files, otherwise i should have the same problem with 70k files, just shorter.

[hugo529100]

version: 0.56.0-rc7
accounts:
  admin:
    admin: true
    srp: removed
  guest:
    srp: removed
  lisa:
    srp: removed
    ignore_limits: true
vfs:
  children:
    - name: speedtest
      url: http://192.168.1.224/%E7%9B%B8%E5%86%8A/Hugo%E7%9A%84-K50%E7%9B%B8%E5%86%8C/DCIM/Camera/
      icon: info
    - name: 素材
      children:
        - name: 出片
          url: http://192.168.1.224/%E7%B4%A0%E6%9D%90/%E8%AC%9B%E8%A7%A3talkshow/%E5%87%BA%E7%89%87/
        - source: C:\Users\monst\AppData\Local\VideoCaptioner\work-dir
          comment: AI字幕導出
        - source: E:\临时素材转移
          comment: T6盤
        - source: D:\拍摄备份\講解talkshow
          comment: D:\拍摄备份\講解talkshow
        - source: F:\素材備份
          name: 素材備份2024
          comment: F:\素材備份
        - source: P:\DCIM
        - source: D:\素材備份
        - source: E:\手機備份
          can_read:
            - admin
          comment: E:\手機備份
        - source: C:\Users\monst\Desktop\素材列表
          comment: C:\Users\monst\Desktop\素材列表
      can_see: can_read
      can_read:
        - admin
      can_list: can_read
      can_upload: can_read
      can_delete: can_read
      icon: video
    - name: 工具
      can_upload: can_delete
      can_delete: false
      children:
        - source: C:\HFS3\tools\drawio
          can_see: false
          can_upload: false
          can_delete: false
        - name: Draw.io
          url: http://192.168.1.224/Tools/drawio/src/main/webapp/
        - source: C:\HFS3\tools\聲震科研工具
          can_see: true
          can_read:
            - admin
      can_see: "*"
      source: tools
      icon: cut
    - source: A:\H2\i
      can_see:
        this: false
      can_upload: false
      can_delete: false
    - source: C:\HFS3\404
      can_see: false
      can_upload: false
      can_delete: false
    - source: A:\H2\PW
      can_see:
        this: false
      can_upload:
        - admin
      default: false
    - source: A:\H2
      can_see:
        this: false
        children: true
      can_upload:
        - admin
      default: false
      children: []
      comment: H2
    - name: 相冊
      children:
        - source: E:\手機備份\Pictures
          can_read:
            - admin
          can_list: can_read
          can_upload: can_read
          can_delete: can_read
          can_archive: can_read
          comment: K50備份 E:\手機備份\Pictures
        - source: P:\Pictures\咪咪
          can_read: "*"
          can_delete: "*"
        - source: P:\Pictures\Lisa
          can_see: "*"
          can_upload: "*"
          can_delete: "*"
          can_read: "*"
        - source: P:\Pictures\小然然
          can_see: true
          can_upload: "*"
          can_delete: "*"
        - source: A:\博物館展覽工作(次級備份可刪)
          can_upload: can_read
          can_delete: can_upload
          can_read:
            - admin
          can_archive: can_read
          name: 博物館展覽工作
          comment: A:\博物館展覽工作(次級備份可刪)
        - source: A:\Hugo(次級備份可刪)
          name: Hugo的-K50相册
          can_upload: can_read
          can_read:
            - admin
          can_delete: can_read
          comment: A:\Hugo(次級備份可刪)
      can_upload: can_delete
      can_delete: false
      icon: image
      default: false
    - name: 網管
      children:
        - source: C:\HFS3
          can_see: can_read
          can_read:
            - admin
          can_list: can_read
          can_upload: can_read
          can_delete: can_read
          can_archive: can_read
        - source: C:\HFS3\images
          can_read:
            - admin
          can_delete: can_read
          default: false
          can_archive: can_read
        - name: trackerslist
          url: https://cf.trackerslist.com/all.txt
        - name: 86-WIFI
          url: http://192.168.1.185/login.html
        - name: 862-WIFI
          url: http://192.168.1.21/login.html
        - name: LaqureLab
          url: http://192.168.1.3/
        - name: www.Luthier.blog
          url: http://192.168.1.201/cgi-bin/luci/web
        - name: AudioLab-1F
          url: http://192.168.1.40/
        - name: Audiolab-5G w5y5d
          url: http://192.168.1.1
          comment: w5y5d
        - name: LaqureLab-WEB
          url: http://192.168.1.204/
          icon: home
        - source: C:\HFS3\Upgrade
          can_read:
            - admin
          can_upload: can_read
          can_delete: can_read
          masks:
            "**/*.ion":
              can_see: false
          icon: reload
          default: false
      can_see:
        - admin
      can_read: can_see
      can_list: can_see
      can_delete: false
      icon: admin
    - name: 電影
      children:
        - source: D:\Moives
          name: 電影-D盘
          comment: 卡通片-妹妹专用
          can_delete:
            - admin
        - source: P:\Youtube視頻暫存
          can_upload: can_delete
          can_delete:
            - admin
          children:
            - source: P:\Youtube視頻暫存\4K Video Downloader Subscribe
              can_see: false
          name: YouTube視頻-P盤
          comment: 科普短視頻
        - source: A:\YouTube視頻
          can_upload: can_delete
          can_delete:
            - admin
          children: []
          name: YouTube視頻-A盤
          comment: 科普短視頻
        - source: A:\Moives
          name: 電影-A盤
          can_delete:
            - admin
          can_upload: can_delete
          comment: 最新大片
        - source: Z:\Moives
          name: Z盤-電影
          can_upload: can_delete
          can_delete:
            - admin
            - "200529100"
        - source: D:\YouTube下载
          name: M盤-YouTube下载
          comment: 科普短視頻
        - source: D:\新电影
          name: M盤-新电影
        - source: D:\综艺频道
          name: M盤-综艺频道
        - source: D:\MOVE
          name: M盤-電影
          can_upload:
            - admin
          can_delete:
            - admin
        - source: E:\迅雷下载
          name: 電影-E盤
          can_delete:
            - admin
          can_upload:
            - admin
          can_see: true
          comment: 最新大片 T6
        - source: X:\Moives
          can_upload:
            - admin
          can_delete:
            - admin
          name: T5盤-電影
          comment: 最新大片
        - source: E:\YouTube下載
          name: T6盤-Youtube視頻
          can_read:
            - admin
          can_upload: can_read
          can_delete: can_read
          comment: 科普短視頻
      masks:
        "**/*.ion":
          can_see: false
      icon: play
      can_delete: false
    - source: E:\Music
      icon: audio
      can_see: true
      can_upload: can_delete
      can_delete:
        - admin
      name: 音樂
      comment: T6-E
    - source: E:\同中樞
      can_read:
        - admin
      can_upload: can_read
      can_delete: can_read
      icon: shuffle
      name: 中樞
      comment: T6-E盤
    - source: E:\临时网盘
      can_delete:
        - admin
      icon: upload
      can_read: "*"
      can_upload: "*"
      name: 网盘
      comment: T6-E
    - name: TZ區
      children:
        - source: A:\TZ
          name: A-TZ
          comment: 主库
          can_delete: can_read
          default: false
        - name: AI-pics
          children:
            - name: 210後台
              url: /H2/pw/html_data/210/
              comment: 文件夾
            - name: 210前台
              url: http://192.168.1.224/H2/index.html
            - name: H2O
              url: /H2/
              comment: A盤臨時區
            - name: AIs-n
              url: /pw/thread1022.php-fid=210&page=1.htm
          comment: 120主頁圖庫
        - name: Manhua
          children:
            - name: H201
              url: http://192.168.1.224/H20/
            - name: Page1
              url: /H/index1.htm
            - name: Page2
              url: /H/index2.htm
            - name: Page3
              url: /H/index3.htm
            - name: Page4
              url: /H/index4.htm
            - name: Page5
              url: /H/index5.htm
            - name: Page6
              url: /H/index6.htm
            - name: Page7
              url: /H/index7.htm
            - name: Page8
              url: /H/index8.htm
            - name: Page9
              url: /H/index9.htm
              comment: 最新
            - name: Page10
              url: /H/index10.htm
            - name: Page11
              url: /H/index11.htm
              comment: 最新
        - source: D:\Z-TT
        - source: Z:\BADDHT
          name: Z-BADDHT
        - source: F:\B\DL\TZ
          name: TZ-4
          can_delete: can_see
        - source: E:\TZ
          name: TZ-6
          can_delete:
            - admin
          can_upload: can_read
          children:
            - source: E:\TZ\ZIPs
              can_see: can_read
              can_read:
                - admin
              can_delete: can_read
          comment: 主库
        - source: X:\TZ
          name: TZ-5
          can_delete:
            - admin
          can_upload: can_read
        - source: Z:\TZunpack
          can_read:
            - admin
          can_delete: can_read
          can_upload: can_read
          name: Z-TZunpack
        - name: Tixati
          url: http://192.168.1.224:8888/home
          can_see:
            - admin
          icon: logout
        - source: D:\Seeds
          can_read:
            - admin
          can_see: can_read
          can_upload: can_read
          can_delete: can_read
          default: false
          comment: BT種子庫
      icon: lock
      can_read:
        - admin
      can_delete:
        - admin
    - name: 雜物
      children:
        - source: E:\Chrome
          comment: T6-E盤
        - source: C:\Users\monst\Desktop
          comment: C盤
        - source: C:\全局style
          comment: C盤
        - source: E:\APPS
          can_read:
            - admin
          can_upload: can_read
          can_delete: can_read
          comment: T6-E盤
        - source: E:\图纸
          comment: T6-E盤
          name: 3D打印图纸
        - source: C:\Users\monst\Downloads
          can_read:
            - admin
          can_upload: can_read
          can_delete: can_read
          comment: C盤
      masks:
        "**/*.ion":
          can_see: false
      icon: copy
      can_read:
        - admin
      can_delete:
        - admin
    - source: E:\H
      can_see:
        this: false
        children: true
      default: false
      masks:
        "**/*.tpu|*.chm|*.txt|*.bat|*.exe|*.tmp|*.tpl|*.zip|*.css|*.vfs|*.ini|*.rar|*.bak|":
          can_see: false
        "**/*.htm|*.html|":
          can_see: true
      can_delete: false
      can_upload: false
    - source: C:\HFS3\images
      can_see:
        this: false
        children:
          - admin
      can_upload:
        - admin
      can_delete:
        - admin
      can_archive: can_delete
  default: index.html
  can_archive: false
  can_upload: can_read
update_to_beta: true
title: Hug3O
enable_plugins:
  - 404-main
  - mark-news-main
  - sharp-main
  - show-any-main
  - thumbnails-main
  - unsupported-videos-main
  - hfs-simple-editor-master
  - min-media-player-main
  - hfs-orange-theme-main
  - hfs-chat-main
log_rotation: daily
invert_order: true
log_api: false
plugins_config:
  dist:
    folders: C:\HFS\png\folder64-min.png
    icons:
      - ext: mp4|mpg|avi|mkv
        iconFile: png\media64-min.png
      - ext: pdf
        iconFile: png\pdf64-min.png
      - ext: txt|css
        iconFile: png\text64-min.png
      - ext: htm|html|php|asp|thm|xml|chm
        iconFile: png\html64-min.png
      - ext: apk|exe
        iconFile: png\exe64-min.png
      - iconFile: png\rar64-min.png
        ext: zip|rar|tar|tz|iso|7z
      - ext: dxf|dwg|stl
        iconFile: png\ico\Hug3O Icon 40.ico
      - ext: torrent
        iconFile: png\ico\Hug3O Icon 08.ico
      - ext: theme
        iconFile: png\ico\Hug3O Icon 48.ico
  show-any-main:
    extensions:
      - ext: txt
      - ext: pdf
      - ext: htm
      - ext: html
  mark-news-main:
    html: ᴺᵉʷ
    only: ""
    days: 3
  code-preview-main:
    regex: txt|vb|js|ts|py|java|c|h|cpp|cxx|hpp|cs|html|css|json|xml|vcxproj|csproj|vbproj|sln|config|resx|xaml|props|targets|ruleset|settings|user|yaml|toml|git.+|filters|def|md|ini|bat
  thumbnails-main:
    fullThreshold: 300
    log: true
  hfs-chat-main:
    retainMessages: 10000
    maxMsgLen: 500
  list-uploader:
    display: user
  hfs-favorites-main:
    folders:
      - dir: 電影/
  min-media-player-main:
    enable_audio: false
    start_video_with:
      - loop
  404-main:
    url: http://192.168.1.224/404/
  vhosting:
    hosts:
      - host: 192.168.1.224:81
  download-counter:
    where: list
  unsupported-videos-main:
    ffmpeg_path: plugins\unsupported-videos-main\ffmpeg.exe
    extensions: avi,mkv,mov,mp4,wmv,webm,mpg
  hfs-simple-editor-master:
    limitMB: 0.2
open_browser_at_start: false
force_lang: en
sort_numerics: true
favicon: images\png\folder-android.ico
sort_by: time
delete_unfinished_uploads_after: 60
track_ips: false
auto_play_seconds: 3
theme: dark
dont_overwrite_uploading: false
listen_interface: 192.168.1.224
min_available_mb: 1024
base_url: http://192.168.1.224
server_code: |-
  exports.init = api => {
    const { exec } = api.require('child_process')
    const { repeat } = api.require('./misc')
    const DAY = 86400*1000
    const cancel = repeat( 1 * DAY, () =>
      exec('clean.bat', err => console.log('System Clean error:', err || 'none ✔')) )
    return { unload: cancel }
  }
max_kbps_per_ip: 8192
auto_check_update: false

custom_html:

  [beforeHeader]
  <style>
  .list-wrapper { 
  max-width: 70em;
  margin-right: auto;
  margin-left: auto;
  }
  </style>
  
  <!-- banner范围限制-->
  <style> 
  #banner img{
    opacity: 0;
    border: 2px solid var(--faint-contrast);
    border-radius: 0.4em;
    height:190px;
    width: 100%;
    position: relative;
    object-fit: cover;
    object-position: center;
    align-items: left;
    margin-left: -2.16px;
    transition: opacity 0.4s ease-in-out;
     }
  </style>
  
  
  <div id="banner">
  <img id="randomImage" data-src="" alt="Random Image" loading="lazy">
  </div>
  
  <script>
      // 初始化Intersection Observer实现懒加载
      const observer = new IntersectionObserver((entries) => {
          entries.forEach(entry => {
              if (entry.isIntersecting) {
                  const img = entry.target;
                  if (!img.src) {
                      loadRandomImage(img);
                  }
                  observer.unobserve(img); // 加载后停止观察
              }
          });
      });
  
      // 图片数组
      const images = [
              '/images/18.jpg',
              '/images/19.jpg',
              '/images/20.jpg',
              '/images/21.jpg',
              '/images/22.jpg',
              '/images/23.jpg',
              '/images/24.jpg',
              '/images/25.jpg',
              '/images/26.jpg',
              '/images/27.jpg',
              '/images/29.jpg',
              '/images/30.jpg',
      ];
  
      // 图片元素
      const imgElement = document.getElementById('randomImage');
  
      // 初始化设置
      function initLazyLoad() {
          // 预存随机图片路径到data-src
          imgElement.dataset.src = getRandomImage();
          // 开始观察元素
          observer.observe(imgElement);
      }
  
      // 实际加载图片
      function loadRandomImage(imgElement) {
          imgElement.src = imgElement.dataset.src;
          imgElement.style.opacity = 0;
          imgElement.onload = () => {
              imgElement.style.opacity = 1;
          }
      }
  
      // 获取随机图片路径
      function getRandomImage() {
          const randomIndex = Math.floor(Math.random() * images.length);
          return images[randomIndex];
      }
  
      // 启动懒加载
      initLazyLoad();
  </script>
  
  [afterMenuBar]
  <style>
  #refreshButton {
  padding: 6px 10px;
   font-size: 14px;
  }
  
  </style>
  
  <!-- 在頁面任意位置添加這個按鈕 -->
  <button id="refreshButton" title="刷新頁面">♻</button>
  
  
  <script>
  // 現有點擊事件代碼保持不變
  document.addEventListener('click', ({ target: t }) => {
    if (t.tagName === 'LI' && t.closest('ul.dir')) {
      t.querySelector('a')?.click()
    }
  })
  
  // 新增刷新功能
  document.getElementById('refreshButton').addEventListener('click', () => {
    location.reload()  // 強制刷新頁面
    // 如果只需要普通刷新可以用 location.reload(false)
  })
  </script>
  
  [footer]
  <style> 
  .footer-w3l p {
      font-size: 10px;
      position: relative;
      height: 4px;
      object-position: center;
      text-align:center;
      max-width: 93em;
      margin-right: auto;
      margin-left: auto;
  }
  </style>
  
  <style> 
  .footer-w3l a {
      font-size: 8px;
  }
  </style>
  
  <div class="footer-w3l">
  	<p>｛紫雲古琴斵製技藝坊｝<a ="_blank" href="https://luthier.blog/">THE GUQIN LUTHIERY & WORKSHOP. SINCE 2014. </a></p>
  		<p>Copyright &copy; 2024. ZIYUN GUQIN LUTHIERY. All rights reserved.</p>
  </div>
  
  [top]
  <style type="text/css">
       
     html {
      zoom: 1.0; /*整個頁面縮放比例*/  
    }
   </style>
   
   
  <style>
  .breadcrumb:nth-of-type(2) { display: true }; /*禁用主页按钮*/
  </style>
  
  <style>
  .breadcrumb:nth-of-type(1) { display: true }; /*禁用返回按钮*/
  </style>
  
  <style>
  #login-options { display: true }; /*禁用登錄允許IP變動*/
  </style>
  

[hugo529100]

😃So so so happy to find that upgrade B7 today morning ,and sorry for my late reply becaust +8 beijing time the night rest.

😓 and i found my stupi thing about the loading slow :

is the power managment , I set that low-per for 24Hour run for my use all years , then the cpu slow just for the BT download and daily job use for transfer.

when i set high-per and include Beta7 ,it load much much faster than before

🌹so thanks bro , for your hotfix that

[hugo529100]

[hugo529100]

Low-per cpu

Screenrecorder-2025-02-08-09-22-11-241.mp4

high-per cpu

VID_20250208_103737.mp4

[rejetto]

i see that it is fast now even on the "low" cpu.
i'm glad you solved.

sorry for my late reply becaust +8 beijing time the night rest.

i know, everybody is entitled to sleep ;)

[hugo529100]

😃 i'm glad too , for that treasure software，better and better