fix: 2-ui/1-document/09.../4.../solution.view

Author: leviding

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

@@ -26,13 +26,21 @@
 
 
   <script>
-    let ball = document.getElementById('ball')
-    let field = document.getElementById('field')
-
-    window.onload = function() {
-      ball.style.left = Math.round(field.clientWidth / 2 - ball.offsetWidth / 2) + 'px';
-      ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 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>