CODEWITHSUNDEEP
jqueryjquery-animate
miszczu
miszczu

Reputation: 1189

jQuery - load images before making height 100%

I have a problem with making div height 100%. Code below works fine only if images are loaded in cache. Otherwise some content is hidden.

<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>

I want to load images only after jquery return response i.e. jQuery(self).next().html(msg);,
and before getting height 100% value in pixels i.e. autoHeight=el.html(msg).css('height', 'auto').height();

Those images are in div class="answer", so it could be $('.answer img).each(function () { ... });

Upvotes: 0

Views: 138

Answers (2)

A. Wolff
A. Wolff

Reputation: 74420

Use load handler of images:

$('.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
    }
});

Upvotes: 1

Rohan Kumar
Rohan Kumar

Reputation: 40639

Try to use load function for this,

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

Upvotes: 0

Related Questions