Question

将div高度设为100％时出现问题。以下代码仅在图像加载到缓存中时才能正常工作。否则会隐藏一些内容。

<script type="text/javascript">
jQuery(".stage > div > p > input").live("change", function() {
    var cat=jQuery(this).val();
    var self = jQuery(this).parent().parent().parent();
    jQuery("#pleaseWait").css("display","block");
    jQuery.ajax({
            type: "POST",
            url: "<?php echo get_permalink(177); ?>",
            data: {
                    curPage: <?php echo $post->ID; ?>,
                    id: cat }
    }).done(function(msg) {
        jQuery(self).next().html(msg);
        jQuery("#pleaseWait").css("display","none");
        var     el=jQuery(self).next(),
                curHeight=el.height(),
                autoHeight=el.css('height', 'auto').height();
        el.height(curHeight).animate({height: autoHeight}, 1000);
    });
});
</script>

我想在jquery返回响应之后加载图像，即jQuery(self).next().html(msg);，
并且在获得高度100％的像素值之前，即autoHeight=el.html(msg).css('height', 'auto').height();

这些图片位于div class="answer"，因此可能是$('.answer img).each(function () { ... });

Answer 1

使用图片的加载处理程序：

$('.answer img').on('load', function () {
    if (this.complete) $(this).data('loaded', true);
    if ($('.answer img').length === $('.answer img').filter(    
    function () {
        return $(this).data('loaded')
    }).length) {
        //all images loaded
    }
});

Answer 2

尝试使用load function，

el.load(function(){
    $(this).height(curHeight).animate({height: autoHeight}, 1000);
});

jQuery - 在高度达到100％之前加载图像

2 个答案: