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 })