Question

我有一个绝对div和一个父div。如何根据绝对div定义父级的高度，知道我有需要一些时间加载的图像？

CSS：

#parent {
    overflow:hidden;
    width:100%;
}
.absolute {
    overflow:hidden;
    width:100%;
    height:100%;
}

HTML：

<div id="parent" style="height:[HEIGHT OF CHILDREN]">
    <div id="absolute1" class="absolute">
        [LOTS OF CONTENT WHICH MAKE A VARIABLE HEIGHT, INCLUDING IMAGES WHICH TAKE SOME TIMES TO LOAD HERE]
    </div>
    <div id="absolute2" class="absolute">
        [LOTS OF CONTENT WHICH MAKE A VARIABLE HEIGHT, INCLUDING IMAGES WHICH TAKE SOME TIMES TO LOAD HERE]
    </div>
</div>
<a href="#absolute1">SAMPLE LINK 1</a>
<a href="#absolute2">SAMPLE LINK 2</a>

JS：

jQuery(document).ready(function($) {
    $('a').bind('click', function(e) {
        var target = $(this).attr('href');

        if($(target).html() !== undefined ) {
            $('#parent').css({
                'height': $('#parent').find(target ).height(),
            })
        }

        e.preventDefault();
    });


    // The problem: height is not correct until image is loaded/in cache
    $('a[href="#absolute1"]').trigger('click');
});

Answer 1

而不是在$(document).ready(...)内运行代码：

$(window).load(function(){
  // Your code here
});

这将确保页面的资源已加载，包括图像。

页面完成后的元素高度

1 个答案: