How to show html when it completely load from ajax call

Question

I am using ajax to Load my product information. Everything is working fine but it is taking time to update the html on the browser (because of 22 small images ). I want to show the content only when all images loading finish.

Please take a look on my ajax call

$("#getstratsecondpart").fadeOut('slow');
$('html, body').animate({
    'scrollTop' : $(".navbar-inverse").position().top
}, 'slow');
var catmainid=$("#getmaincatids").text();
var catSubmainid=$("#getsubcatid").text();
var proceed = true;
if(proceed) {
    post_data = {'pagnoval':pagnoval,'catmainid':catmainid,'catSubmainid':catSubmainid};

    $.post('<?php echo base_url(); ?products/getmyproduct_list', post_data, function(response) {
        if(response.customlist) {
            $("#getstratsecondpart").empty();
            $( "#getstratsecondpart" ).html(response.customlist);
        }
    }, 'json');
}
$("#getstratsecondpart").fadeIn('slow');

Possible duplicate of [Official way to ask jQuery wait for all images to load before executing something](http://stackoverflow.com/questions/544993/official-way-to-ask-jquery-wait-for-all-images-to-load-before-executing-somethin) — Iago, Oct 19 '15 at 05:56
You need to call the fade in the ajax handler after setting the html content... but also need to wait for all the images to load — Arun P Johny, Oct 19 '15 at 05:57

score 1 · Accepted Answer · answered Oct 19 '15 at 05:59

You need to move the fadeIn logic to the ajax handler, but also need to add the logic to handle the image loading case so

$("#getstratsecondpart").fadeOut('slow');
$('html, body').animate({
    'scrollTop': $(".navbar-inverse").position().top
}, 'slow');
var catmainid = $("#getmaincatids").text();
var catSubmainid = $("#getsubcatid").text();
var proceed = true;
if (proceed) {
    post_data = {
        'pagnoval': pagnoval,
            'catmainid': catmainid,
            'catSubmainid': catSubmainid
    };

    $.post('<?php echo base_url(); ?>products/getmyproduct_list', post_data, function (response) {
        if (response.customlist) {
            $("#getstratsecondpart").empty();
            $("#getstratsecondpart").html(response.customlist);

            //to wait for the images to load
            var counter = 0,
                $images = $("#getstratsecondpart").find('img'),
                len = $images.length;
            $images.load(function () {
                if (++counter == length) {
                    $("#getstratsecondpart").fadeIn('slow');
                }
            }).filter(function () {
                return this.complete;
            }).load();
        }
    }, 'json');
}

How to show html when it completely load from ajax call

1 Answers1