Question

我正在使用ajax来加载我的产品信息。一切都运行正常但是需要时间来更新浏览器上的html（因为22张小图片）。我想在所有图片加载完成后才显示内容。

请查看我的ajax电话

$("#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');

Answer 1

您需要将fadeIn逻辑移动到ajax处理程序，还需要添加逻辑来处理图像加载大小写

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

如何在从ajax调用完全加载时显示html

1 个答案: