fix: 2-ui/1.../09.../4.../ball-half/index.html

Author: leviding

2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/ball-half/index.html

@@ -26,13 +26,21 @@
 
 
   <script>
-    let ball = document.getElementById('ball')
-    let field = document.getElementById('field')
-
-    // ball.offsetWidth=0 before image loaded!
-    // to fix: set width
-    ball.style.left = Math.round(field.clientWidth / 2) + 'px'
-    ball.style.top = Math.round(field.clientHeight / 2) + 'px'
+    const ball = document.getElementById('ball');
+    const field = document.getElementById('field');
+
+    // 因为在图片加载完成前，ball.offsetWidth = 0，所以先判断获取到的 field 和 ball 宽度是否有值
+    // 有值则进行计算，没值则在 100ms 后再次获取并判断，时间长短可自行设定
+    const updateBallPosition = () => {
+      if (field.clientWidth && ball.offsetWidth) {
+        ball.style.left = Math.round(field.clientWidth / 2 - ball.offsetWidth / 2) + 'px';
+        ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 2) + 'px';
+      } else {
+        setTimeout(updateBallPosition, 100);
+      }
+    };
+
+    updateBallPosition();
   </script>