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

Posted 2023-05-09

【中文标题】如何在元素完成渲染后立即运行函数？

【英文标题】：How can I run a function as soon as an element has finished rendering?

【发布时间】：2013-04-09 03:57:17

【问题描述】：

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

如果我在 $(document).ready() 内的函数开头查询其他元素的高度，它会返回 432px。

如果我在 setTimeout(function, 100) 中查询其他元素的高度，它会返回大约 475 像素。

如果我将setTimeout 提高到 150 左右，则元素完成渲染并得到 190。但显然我不能指望这一点。

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

似乎load 事件应该适用于任意元素，但据我所知，这在浏览器中没有实现，或者至少在 Chrome 中没有实现。

编辑：元素不是图像，并且（几乎可以肯定）元素内部永远不会有图像。它只是一个<div> 和其他一些<div>s 和<p>s 以及其中的一些东西。显然在应用 CSS 或其他东西的中间会查询高度。代码示例即将发布。

编辑 2：Here's a fiddle 被黑掉了我的网站。 （请原谅可怕的标记；我还没有清理 Drupal 的输出。）不过，小提琴没有表现出我试图纠正的不良行为，因为整个 sn-p 在相关部分之前呈现javascript 已运行。

有没有办法做到这一点，还是我坚持使用window.onload？

【问题讨论】：

那个元素是什么？图片？

你能告诉我们你的代码吗？最好在 jsFiddle 中？

正如您所注意到的，一个元素的尺寸通常依赖于其他元素，因此在所有其他元素都被渲染之前计算它的尺寸是不可靠的。当您可以确定元素处于其最终尺寸时，窗口加载事件是最早的可靠点。

@Leng 我很抱歉。我的意图不是引起争论。我确实读过cmets。根据您的评论，您说是。除了“是的，它是一个图像”之外，我不知道如何在任何其他情况下使用它。在 OP 澄清这个事实之前，（或者他们是否决定）我们只能推测它是一个图像。我只是注意到这一点，因为没有人应该根据我们认为它是一个图像这一事实来回答。

@War10ck 啊，我也很抱歉，我误读了你的语气。感谢您的澄清。我绝对同意。

【参考方案1】：

你可以这样做：

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

【讨论】：

并非每个元素都是图像

@ejay 需要渲染但不会立即（或几乎立即）发生的东西通常是图像。他没有具体说明，但加载图像延迟很常见。这对 div 不起作用，因为 div 是即时加载的。它们里面的内容可能不是，但如果你用函数填充 div 中的内容，那么你应该检查该内容是否加载了其他函数。

他的容器中有多个图像怎么办？

@Ejay var counter = 0; function incrementLoad()if(counter == $('img').length)alert("所有图片都已加载");elsecounter++;

如果他有 jQuery，那么为什么要使用晦涩的 javascript？

【参考方案2】：

您至少需要使用$(window).load()，因为您需要等待可能影响页面元素尺寸的图像和 CSS 表等其他资源。

load() 也可以处理图像。您应该能够在不需要setTimeout 的情况下正确处理它。

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

【讨论】：

.load 自 jQuery 1.8 起已弃用，因此不推荐使用。

然后使用.on("load", .. )。 api.jquery.com/category/deprecated/deprecated-1.8 这个方法是.on('load', handler)的快捷方式。

那是最好的，但如果您在答案中更改它可能会有所帮助。