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

时间:2017-09-13 07:30:33

标签: javascript jquery ajax

我遇到了$.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>

希望它有所帮助,虽然我看不出任何错误。

1 个答案:

答案 0 :(得分:1)

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

private void showListPopupWindow(View anchor) {
    List<ListPopupItem> listPopupItems = new ArrayList<>();
    listPopupItems.add(new ListPopupItem("Menu 1", R.mipmap.ic_launcher));
    listPopupItems.add(new ListPopupItem("Menu 2", R.mipmap.ic_launcher));
    listPopupItems.add(new ListPopupItem("Menu 3", R.mipmap.ic_launcher));

    final ListPopupWindow listPopupWindow =
            createListPopupWindow(anchor, ViewGroup.LayoutParams.MATCH_PARENT, listPopupItems);
    listPopupWindow.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            listPopupWindow.dismiss();
            Toast.makeText(MainActivity.this, "clicked at " + position, Toast.LENGTH_SHORT)
                    .show();
        }
    });
    listPopupWindow.show();
}

private ListPopupWindow createListPopupWindow(View anchor, int width,
        List<ListPopupItem> items) {
    final ListPopupWindow popup = new ListPopupWindow(this);
    ListAdapter adapter = new ListPopupWindowAdapter(items);
    popup.setAnchorView(anchor);
    popup.setWidth(width);
    popup.setAdapter(adapter);
    return popup;
}

<强>原因:

由于未正确计算高度,因为当图像开始加载时,其高度计算不正确,那么#picturesByCat仅限于错误的计算值,因此未完全显示,但图像正确加载。

第二次单击该类别时,这些图像会完全显示并且高度正确,然后问题就消失了。

解决:

动画结束后将高度设置为自动:

button.setOnClickListener(new View.OnClickListener() {
       @Override
       public void onClick(View view) {
            showListPopupWindow(view);
       }
});