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