Question

简而言之，我希望在注入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() );
  });

Answer 1

这就是我的所作所为：

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

我等待它渲染时从来没有遇到任何问题。

Answer 2

如果chrome中出现问题我假设您插入的内容包含来图像。 Chrome在完全加载之前不会计算图像的尺寸（DOM准备就绪不够）。那么通常可以解决这个问题的是在window.onload事件上执行渲染。这样您就可以确保加载图片并.height() / .width()可以正常工作。虽然我意识到这并不总是可行的，因为window.onload事件在DOMContentLoaded之后被激活很多。

另一种方法是通过相应图像标记的width和height属性明确指定图像尺寸。如果您知道图像大小，这可以工作。在这种情况下，没有必要在window.onload上执行逻辑。

Answer 3

如果您的“tonsofstuff”有图像，则setTimeout攻击是错误的方法。您需要知道何时加载每个图像，然后进行DOM高度计算。为此，你可能必须反省html加载，查找图像，并使用像Image Preloader Plugin这样的调用。我不一定推荐它;编写自己的东西是相当微不足道的（尽管某些方法可能存在一些问题）。我只知道那里有类似的东西应该可以很好地工作。

jQuery.html（某物）检测注入何时完成

3 个答案: