奇妙な問題、私はページ

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

は、私は、サーバー上のページをアップロードし、他のユーザーはアイコンがメインの絵を重ねたことを教えてくれました。しかし、これは一度しか起こらず、ページをリロードするときに修正されます。私もそれを目撃しました。もう1つのブラウザを使って問題を再現できました。もう一度やり直してみてください。

何が間違っているのか分かりません。おそらくメインの画像の読み込みには時間がかかり、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>";