0

我有一个包含动态内容（图像和文本）的 div。然后我需要计算 div 的高度并对它做一些事情。

但是，它当前在添加内容之前计算 div 的高度。

有人对此有解决方案吗？

$('#results').find('article').addClass(result); // add class to entire section
$('#results article').find('.details h1 span').html(title); // add title
$('#results article').find('.details p').html(message); // add message

var windowHeight = $('#results').find('article').innerHeight();
4

3 回答 3

7

您的内容中可能包含图像。您必须等待它们加载：

var $results = $('#results'),
    $article = $results.find('article'),
    deferreds = [];

$article.addClass(result); // add class to entire section
$article.find('.details h1 span').html(title); // add title
$article.find('.details p').html(message); // add message

$results.find('img').each(function()
{
    var deferred = $.Deferred();

    deferreds.push(deferred);

    this.onload = function() { deferred.resolve(); }
});

$.when.apply($, deferreds).then(function()
{
    var windowHeight = $article.innerHeight();
});

此方法使用 jQuery 的Deferredsload ，这使得跟踪所有事件变得非常容易。

于 2012-09-06T01:04:51.030 回答
0

如果这不是尚未加载的图像的问题，那么您可能只需要自己触发布局，以便获得所需的尺寸。

在您的脚本完成之前，浏览器通常不会布局新内容（并且可以确定您已经完成了对 DOM 的更改）。您可以通过向 DOM 询问浏览器知道需要布局的相关维度来触发脚本中的布局。

有关将触发布局的那些属性的列表，请参阅这篇文章http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html 。

于 2012-09-06T01:13:23.270 回答
0

您可以使用以下代码在所有动态数据加载后触发代码查找高度

$(window).load(function(){

   var divHeight = $('#yourDivId').height()
}

希望它会有所帮助

于 2013-04-11T08:42:53.973 回答