PHP和JS脚本的奇怪问题，在我刷新页面之前第一次失败 - Weird issue with PHP and JS scripts, fails the first time until I refresh the page

Weird issue with PHP and JS scripts, fails the first time until I refresh the page

我有一个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>";

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

谢谢你的帮助！

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>";