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

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);
});