[add] 載入圖片超過一定時間才顯示載入動畫，避免過於頻繁出現載入動畫

hbl917070 · Jun 11, 2022 · 4ce3bab · 4ce3bab
1 parent 249c8fa
commit 4ce3bab
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 7 deletions.
diff --git a/Tiefsee/Tiefsee/bin/output/www/ts/MainWindow/FileShow.ts b/Tiefsee/Tiefsee/bin/output/www/ts/MainWindow/FileShow.ts
@@ -224,15 +224,15 @@ class FileShow {
             setShowType(GroupType.img);//改變顯示類型
             let imgurl = _path;//圖片網址
 
-            tieefseeview.setLoading(true);
+            tieefseeview.setLoading(true, 200);
 
             let encodePath = encodeURIComponent(_path);
             let fileTime = `LastWriteTimeUtc=${fileInfo2.LastWriteTimeUtc}`;
 
             let fileType = Lib.GetFileType(fileInfo2);//取得檔案類型
             let configItem = M.config.getAllowFileTypeItem(GroupType.img, fileType);// ex. { ext:"psd", type:"magick" }
             if (configItem == undefined) {
-                configItem = { ext: "", type:"vips", vipsType: "magick" }
+                configItem = { ext: "", type: "vips", vipsType: "magick" }
             }
             let configType = configItem.type;
 
@@ -290,7 +290,7 @@ class FileShow {
                 if (imgInitInfo.code == 1) {
 
                     //設定縮放的比例
-                    let arUrl: { scale: number, url: string }[] = [];    
+                    let arUrl: { scale: number, url: string }[] = [];
                     arUrl.push({ scale: 1, url: imgInitInfo.path + `?${fileTime}` })
                     for (let i = 1; i <= 10; i++) {
                         let scale = Number(Math.pow(0.7, i).toFixed(3));
@@ -350,7 +350,7 @@ class FileShow {
                 imgurl = Lib.pathToURL(_path) + `?LastWriteTimeUtc=${fileInfo2.LastWriteTimeUtc}`;
             }
 
-            tieefseeview.setLoading(true);
+            tieefseeview.setLoading(true, 200);
             await tieefseeview.preloadImg(imgurl);//預載入
             await tieefseeview.loadVideo(imgurl);//使用video渲染
 

diff --git a/Tiefsee/Tiefsee/bin/output/www/ts/Tiefseeview.ts b/Tiefsee/Tiefsee/bin/output/www/ts/Tiefseeview.ts
@@ -139,6 +139,7 @@ class Tieefseeview {
         var temp_pinchCenterX = 0;
         var temp_pinchCenterY = 0;
 
+        var temp_dateShowLoading: number = 0;//控制laoding顯示的延遲
         var temp_originalWidth: number = 1;//用於記錄圖片size 的暫存
         var temp_originalHeight: number = 1;
         var temp_img: HTMLImageElement;//圖片暫存
@@ -148,6 +149,7 @@ class Tieefseeview {
         /** Bigimgscale 用於儲存圖片網址與比例 */
         var arBigimgscale: { scale: number, url: string }[] = []
 
+
         //滑鼠滾輪做的事情
         var eventMouseWheel = (_type: ("up" | "down"), offsetX: number, offsetY: number): void => {
             if (_type === "up") { zoomIn(offsetX, offsetY); }
@@ -993,15 +995,28 @@ class Tieefseeview {
             return ""
         }
 
+
         /**
          * 顯示或隱藏 loading
-         * @param _b 
+         * @param val 
+         * @param delay 延遲顯示(ms)
          */
-        function setLoading(_b: boolean) {
-            if (_b) {
+        function setLoading(val: boolean, delay: number = 200) {
+            /*if (_b) {
                 dom_loading.style.display = "block";
             } else {
                 dom_loading.style.display = "none";
+            }*/
+            if (val) {
+                setTimeout(() => {
+                    if ((new Date()).getTime() > temp_dateShowLoading) {
+                        dom_loading.style.display = "block";
+                    }
+                }, delay);
+                temp_dateShowLoading = (new Date()).getTime() + delay - 1;
+            } else {
+                temp_dateShowLoading = 99999999999999;//避免延遲時間到了之後還顯示
+                dom_loading.style.display = "none";
             }
         }