3

私には絶対的な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');
});
4

1 に答える 1

5

使用中にコードを実行する代わりに$(document).ready(...)：

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

これにより、画像を含むページのアセットが確実に読み込まれます。

于 2012-09-24T21:43:33.470 に答える