PHP和JS脚本的奇怪问题，在我刷新页面之前第一次失败

Question

I have a PHP page which displays a picture :

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

Later in the code, i'm placing small icons around that picture, using 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>";

I uploaded the page on a server, and other users told me that the icons were overlapping the main picture. However this only happens once, and it is fixed when they reload the page. I've witnessed that too, and i could reproduce the issue by using another browser, again solved by refreshing.

I have no idea what's wrong. Perhaps the main picture takes too long to load, and the JS script has already been performed, so the icons are badly positioned - but it is later fixed because the picture is in the temporary files, or something.

I tried to delay the JS script with a setTimeout, but still didn't fix the problem

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

or maybe i could try with more milliseconds... i can't make a proper diagnosis due to the difficulty to reproduce the issue

Thanks for your help !

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