Javascript html（something）检测注入何时完成

简言之，我希望在注入html并呈现html内容后启动回调。原因是我需要马上知道新内容的高度。大概是这样的：

  $('div').html(tonsofstuff);
  console.log( $('div').height() ); //works in Firefox, but returns 0 in Chrome
  setTimeout(function(){
        console.log( $('div').height() ); //works everywhere, but takes too long
  },3000);

问题偶尔会出现在某些浏览器中（并且总是在chrome中）$（'div'）。height（）会在新内容具有高度之前激发

我的幻想：

  $('div').html(tonsofstuff, function(){
        console.log( $('div').height() );
  });

  or even

  $('div').html(tonsofstuff).load(function(){
        console.log( $('div').height() );
  });

我就是这么做的：

var height = $('div').html(tonsofstuff).height();

---

我在等待它呈现时从来没有遇到过任何问题。

如果问题发生在chrome中，我假设您插入的内容包含图像。Chrome在完全加载图像之前不会计算图像的尺寸（DOM就绪是不够的）。因此，通常可以解决此问题的方法是在window.onload事件上执行渲染。这样可以确保加载的图像和

.height（）

/

.width（）

正常工作。虽然我意识到这并不总是可能的，因为

window.onload

事件是在

domcontentload

之后触发的

---

另一种方法是通过相应图像标记的

width

和

height

属性明确指定图像尺寸。如果您知道图像的大小，这可能会起作用。在这种情况下，不必在

窗口上执行逻辑。onload

如果“tonsofstuff”具有图像，则setTimeout攻击是错误的方法。您需要知道何时加载每个图像，然后进行DOM高度计算。为此，您可能需要对html进行内省，以加载、查找图像，并使用对类似的调用。我不一定推荐它；编写自己的代码是相当简单的（尽管某些方法可能存在一些缺陷）。我只知道有些东西应该很好用。

顺便说一句，当我说图像时，我指的是图像标签。如果他正在加载图像，并且图像有固定的高度，他可以添加一些css来防止页面在加载时增长。有图像，但我使用高度属性来防止再次回流。Chrome确实读到了这一点，所以在dom中等待图像不是问题。它可能会出现异步问题，比如iFrame进入外部窗口调整自身大小，这完全符合我的目的。谢谢，我真的试过了。如果用户已经看到该页面，则缓存内容，并且不会触发onload。