javascript - jQuery $.post 返回不完整的数据

Question

我遇到过 $.post 命令的奇怪行为。我有一个通过 $.post(param,returned data) 发出的 AJAX 请求，它将图片加载到访问者的页面上。

这是代码，带有一点动画:

function showPicturesByCat(cat){
$('.local-overlay').fadeIn(200);
$('#picturesByCat').stop().animate({height: '0px' },200);
setTimeout(function(){
    $.post('./ajax/populate.php',{operation:'show-pictures-on-front',cat:cat})
        .done(function(data){
            $('#picturesByCat').html(data);
            setTimeout(function(){
                var inaltime = $('#picturesByCat')[0].scrollHeight+20;
                $('#picturesByCat').stop().animate({height: inaltime+'px' },500);
                $('#picturesByCat').css({opacity: 1});
                $('.local-overlay').delay(500).fadeOut(300);
            },300);
            $('html, body').delay(200).stop().animate({
                scrollTop: $('#picturesByCat').offset().top
            },300);
        });
},200);
}

在 PHP 方面，它只是根据所选类别 (cat) 在数据库中加载带有名称的图片。代码完美运行……在 PC 上，但是当它转向移动设备时，Chrome 和 Firefox 都会做同样奇怪的事情。当我选择一个类别时，图片加载但不完整。如果你滚动到底部，你会看到这个东西。如果我第二次点击同一类别，图片会完全加载。

这是地址

http://adrianmalancaphotography.com/en/fotografie

我想不通，这对我来说太奇怪了。也许你们中的一些人可以发现或已经知道问题出在哪里。

编辑:

这是评论中要求的转储数据。

<hr class="hr-white">
Peisaj
<hr class="hr-white">
<div class="col-12">
    <div class="card-columns">
        <div class="card card-block p-0 foto-card my-2">
            <div class="img-over-info"> <span>Maci 2</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
            <img src="./images/small/AMP-IMG-22.jpg" class="img-fluid" width="100%" alt="fotografie Maci 2" onClick="showImage(22)"> </div>
        <div class="card card-block p-0 foto-card my-2">
            <div class="img-over-info"> <span>Grau</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
            <img src="./images/small/AMP-IMG-17.jpg" class="img-fluid" width="100%" alt="fotografie Grau" onClick="showImage(17)"> </div>
        <div class="card card-block p-0 foto-card my-2">
            <div class="img-over-info"> <span>Apa incetosata</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
            <img src="./images/small/AMP-IMG-15.jpg" class="img-fluid" width="100%" alt="fotografie Apa incetosata" onClick="showImage(15)"> </div>
        <div class="card card-block p-0 foto-card my-2">
            <div class="img-over-info"> <span>Apus intunecat</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
            <img src="./images/small/AMP-IMG-14.jpg" class="img-fluid" width="100%" alt="fotografie Apus intunecat" onClick="showImage(14)"> </div>
        <div class="card card-block p-0 foto-card my-2">
            <div class="img-over-info"> <span>Nori cenusii</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
            <img src="./images/preview/AMP-IMG-13.jpg" class="img-fluid" width="100%" alt="fotografie Nori cenusii" onClick="showImage(13)"> </div>
        <div class="card card-block p-0 foto-card my-2">
            <div class="img-over-info"> <span>La tara</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
            <img src="./images/small/AMP-IMG-12.jpg" class="img-fluid" width="100%" alt="fotografie La tara" onClick="showImage(12)"> </div>
        <div class="card card-block p-0 foto-card my-2">
            <div class="img-over-info"> <span>Ponton</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
            <img src="./images/small/AMP-IMG-10.jpg" class="img-fluid" width="100%" alt="fotografie Ponton" onClick="showImage(10)"> </div>
        <div class="card card-block p-0 foto-card my-2">
            <div class="img-over-info"> <span>Lebede</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
            <img src="./images/small/AMP-IMG-9.jpg" class="img-fluid" width="100%" alt="fotografie Lebede" onClick="showImage(9)"> </div>
        <div class="card card-block p-0 foto-card my-2">
            <div class="img-over-info"> <span>Apus pe apa</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
            <img src="./images/small/AMP-IMG-8.jpg" class="img-fluid" width="100%" alt="fotografie Apus pe apa" onClick="showImage(8)"> </div>
        <div class="card card-block p-0 foto-card my-2">
            <div class="img-over-info"> <span>Camp cu maci</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
            <img src="./images/small/AMP-IMG-4.jpg" class="img-fluid" width="100%" alt="fotografie Camp cu maci" onClick="showImage(4)"> </div>
    </div>
</div>

希望对您有所帮助，尽管我看不出有什么不对。

Answer 1

问题不是来自$.post。问题是由以下原因引起的:

var inaltime = $('#picturesByCat')[0].scrollHeight+20;
$('#picturesByCat').stop().animate({height: inaltime+'px' },500);

原因:

由于高度计算不正确，因为当你的图片开始加载时，它的高度计算不正确，那么你的#picturesByCat 被限制在你错误的计算值，所以它没有完全显示，但图像加载正确.

第二次点击类别时，这些图片完全显示并具有正确的高度，然后问题就消失了。

解决方案:

动画完成后将高度设置回自动:

$('#picturesByCat').stop().animate({height: inaltime+'px' },500, function(){
    $('#picturesByCat').css('height', 'auto');
});