javascript - PHP 和 JS 脚本的奇怪问题，第一次失败，直到我刷新页面

Question

我有一个显示图片的 PHP 页面:

echo "<p> <img id=\"myPic\" src=\"myPic.png\" > </p>";

在代码的后面，我使用 JS 在该图片周围放置小图标:

echo "<script>
  var picTop = document.getElementById(\"myPic\").offsetTop ;
  var picLeft= document.getElementById(\"myPic\").offsetLeft ;

  document.getElementById(\"" . $iconId. "\").style.top = picTop + " . $iconPosition[$i][0] . " + \"px\"; 
  document.getElementById(\"" . $iconId. "\").style.left = picLeft + " . $iconPosition[$i][1] . " + \"px\"; 
</script>";

我将页面上传到服务器上，其他用户告诉我图标与主图片重叠。然而，这种情况只会发生一次，并且在重新加载页面时会被修复。我也目睹了这一点，我可以使用另一个浏览器重现该问题，再次通过刷新解决。

我不知道出了什么问题。可能是主图加载时间太长，而JS脚本已经执行过了，所以图标位置不好——不过后来修复了，因为图片在临时文件里什么的。

我尝试用setTimeout来延迟JS脚本，但仍然没有解决问题

echo "<script> 
  var picTop = document.getElementById(\"myPic\").offsetTop ;
  var picLeft= document.getElementById(\"myPic\").offsetLeft ;

  setTimeout ( function() {  
  document.getElementById(\"" . $iconId. "\").style.top = picTop + " . $iconPosition[$i][0] . " + \"px\"; 
  document.getElementById(\"" . $iconId. "\").style.left = picLeft + " . $iconPosition[$i][1] . " + \"px\";
}, 500) ; 
</script>";

或者也许我可以尝试更多毫秒...由于难以重现问题，我无法做出正确的诊断

感谢您的帮助!

Answer 1

echo "<script>
    document.addEventListener( 'DOMContentLoaded', function () {
        var picTop = document.getElementById(\"myPic\").offsetTop ;
        var picLeft= document.getElementById(\"myPic\").offsetLeft ;

        document.getElementById(\"" . $iconId. "\").style.top = picTop + " . $iconPosition[$i][0] . " + \"px\"; 
        document.getElementById(\"" . $iconId. "\").style.left = picLeft + " . $iconPosition[$i][1] . " + \"px\"; 
    }, false );
</script>";