Javascript 加載事件監聽器

Question

我只是想問一下，在第一次加載頁面時，如何確保元素詳細信息（例如視口中的 position、getBoundingClientRect）是正確的。 目前我對普通的 div 元素有疑問。 它顯示在我通過獲取語句獲得的圖像之后。 我在 window 上使用了加載事件，在加載頁面后，我得到了 div 元素的 position 的信息。 不幸的是，加載圖像在加載之前觸發，這意味着 position 詳細信息是錯誤的。 您如何以及何時使用加載事件？ 我還能做些什么來確保我收到正確的 position 詳細信息。

Html <div class="wrapperImg"></div> <div class="position"></div>

Js window.addEventListener("load",()=>{console.log(document.querySelector(".position").getBoundingClientRect());}

非常感謝 問候 Kat

Answer 1

您需要在圖像加載后調用getBoundingClientRect() ，這意味着您的獲取調用已解決（因為它是異步執行的）。

請記住：加載事件不包括 asnyc 獲取的資源（因為這些資源是動態處理的）。 有關加載事件的更多信息， 請參閱文檔。

Answer 2

'load'事件偵聽器也可以像這樣應用於圖像：

 var img = new Image(); img.src = "img.jpg"; img.onload = function () { alert("image is loaded"); }

您還可以在獲取后獲取getBoundingClientRect()屬性：

 fetch('image.png').then(i => { //get size })