如何在元素完成渲染后立即运行函数?

How can I run a function as soon as an element has finished rendering?

本文关键字：运行函数元素更新时间：2023-09-26

我需要根据另一个元素的高度设置一个元素的高度。假设当元素渲染完成时，它的高度是490px。

如果我在$(document).ready()内的函数开始处查询另一个元素的高度，它返回432px。

如果我在setTimeout(function, 100)中查询另一个元素的高度，它返回大约475px。

如果我把setTimeout调到150左右，元素渲染完成，我得到190。但显然我不能指望这个。

如果可能的话，我不想等待整个页面加载完成;我想只等待这个元素

似乎load事件应该在任意元素上工作，但据我所知，这在浏览器中未实现，或者至少在Chrome中。

EDIT:元素不是图像，并且(几乎可以肯定)元素内部不会有图像。它只是一个<div>加上一些其他的<div>和<p>什么的。高度显然是在CSS应用的中间被查询的。代码示例即将发布。

EDIT 2:这是我网站上的一个小提琴。(请原谅可怕的加价;我还没有清理Drupal的输出。)但是，小提琴并没有表现出我试图纠正的不良行为，因为在Javascript的相关部分运行之前，整个代码片段已经呈现。

有办法做到这一点，还是我坚持与window.onload ?

你可以这样做:

<img src="myImage.gif" onload="loadImage()">

您将希望至少使用$(window).load()，因为您需要等待额外的资源，如图像和CSS表，这些资源可能会影响页面上元素的尺寸。

load()也可以用于图像。你应该能够在不需要setTimeout的情况下得到它。

http://api.jquery.com/load-event/包含一个通知，它不能可靠地工作的图像