pixuireactcomponents 1.4.5 → 1.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pixuireactcomponents",
-    "version": "1.4.5",
+    "version": "1.4.6",
     "description": "pixui react components",
     "main": "index.js",
     "scripts": {

package/src/components/react/app/loadChecker/LoadChecker.js

@@ -12,8 +12,9 @@ import { useEffect, useRef, useState } from 'preact/hooks';
 export var LoadChecker = function (props) {
     var children = props.children, _a = props.rootClass, rootClass = _a === void 0 ? '' : _a, _b = props.timeoutPeriod, timeoutPeriod = _b === void 0 ? 500 : _b, onLoad = props.onLoad;
     var _c = useState(false), loaded = _c[0], setLoaded = _c[1];
-    var _d = useState(0), total = _d[0], setTotal = _d[1];
+    var _d = useState(false), collectFinish = _d[0], setCollectFinish = _d[1];
     var _e = useState([]), loadedElements = _e[0], setLoadedElements = _e[1];
+    var _f = useState([]), collectSrcs = _f[0], setCollectSrcs = _f[1];
     var ref = useRef(null);
     //0.5s后直接显示
     useEffect(function () {
@@ -25,42 +26,60 @@ export var LoadChecker = function (props) {
             setLoaded(true);
             return;
         }
-        setTotal(getLoadCount(node, 0));
+        getLoadCount(node);
+        setCollectFinish(true);
         return function () {
             clearTimeout(timer);
         };
     }, []);
-    var getLoadCount = function (node, preCount) {
+    useEffect(function () {
+        if (!collectFinish)
+            return;
+        if (collectSrcs.length == 0 || loadedElements.length >= collectSrcs.length) {
+            setLoaded(true);
+            onLoad && onLoad();
+        }
+    }, [loadedElements, collectFinish]);
+    var getLoadCount = function (node) {
         if (!node)
-            return preCount;
-        var temp = 0;
+            return;
         if (node.tagName.toLowerCase() === 'img' || (node.style && node.style.backgroundImage)) {
-            temp++;
-            //   console.log(node.id);
+            // node.id = 'img_' + cnt++;
+            setCollectSrcs(function (prevRecords) {
+                var src = getEleSrc(node);
+                if (src == '' || prevRecords.includes(src)) {
+                    return prevRecords;
+                }
+                else {
+                    return __spreadArray(__spreadArray([], prevRecords, true), [src], false);
+                }
+            });
             node.addEventListener('load', handleLoad);
         }
         node.childNodes &&
             node.childNodes.forEach(function (child) {
-                temp += getLoadCount(child, temp);
+                getLoadCount(child);
             });
-        return temp;
+        return;
     };
-    useEffect(function () {
-        if (loaded && onLoad) {
-            onLoad();
+    var getEleSrc = function (node) {
+        if (node.tagName.toLowerCase() === 'img' || (node.style && node.style.backgroundImage)) {
+            var src = node.src || node.style.backgroundImage || '';
+            if (src.startsWith('url(')) {
+                src = src.substring(4, src.length - 1);
+            }
+            return src;
         }
-    }, [loaded]);
+        return '';
+    };
     var handleLoad = function (event) {
         setLoadedElements(function (prevElements) {
-            if (prevElements.includes(event.target)) {
+            var src = getEleSrc(event.target);
+            if (src == '' || prevElements.includes(src)) {
                 return prevElements;
             }
             else {
-                var newElements = __spreadArray(__spreadArray([], prevElements, true), [event.target], false);
-                if (newElements.length >= total) {
-                    setLoaded(true);
-                }
-                return newElements;
+                return __spreadArray(__spreadArray([], prevElements, true), [src], false);
             }
         });
     };