Javascript 隐藏ajax附加的html，直到某一点

我正在使用AJAX从数据库中加载更多结果

以下是基本脚本：

  $('#loadmorebuilds-div').click(function() {
    $.ajax({
        url: 'includes/loadmorebuilds.php?type=' + type + '&pageIndex=' + pageIndex + '&st=' + searchTerm,
        success: function(html) {
            // append the new results
            $("#buildcontainer").append(html);
            // wait untill all images are loaded before the waterfall function is called
            imagesLoaded( '#buildcontainer', function()
            {
                $("#buildcontainer").waterfall('reflow');
            });
        }
    });
  });

问题是，新附加的数据（html）会显示出来，但它会重叠，直到图像加载完毕，然后在容器上调用reflow函数，从而使项目落入其网格中

我只想在图像已经加载并且项目已经“回流”到瀑布网格之后显示附加的数据

我就是不知道该怎么做

谢谢。另外，ImagesLoaded是一个用于检测何时加载所有图像的库，瀑布是一种砖石网格样式

---

编辑：为了澄清，加载的html包含我正在检查加载的图像。

隐藏更新的DIV，然后在加载图像时显示：

  $('#loadmorebuilds-div').click(function() {
    $.ajax({
        url: 'includes/loadmorebuilds.php?type=' + type + '&pageIndex=' + pageIndex + '&st=' + searchTerm,
        success: function(html) {
            // append the new results
            $("#buildcontainer").append(html).hide();
            // wait untill all images are loaded before the waterfall function is called
            imagesLoaded( '#buildcontainer', function()
            {
                $("#buildcontainer").waterfall('reflow').show();
            });
        }
    });
  });

---

在调用imagesLoaded回调函数之前，不要追加html：

$('#loadmorebuilds-div').click(function() {
    $.ajax({
        url: 'includes/loadmorebuilds.php?type=' + type + '&pageIndex=' + pageIndex + '&st=' + searchTerm,
        success: function(html) {
                // append the new results
                $("#buildcontainer").append(html).css('opacity', 0);

            // wait untill all images are loaded before the waterfall function is called
            imagesLoaded( '#buildcontainer', function()
            {
                $("#buildcontainer").waterfall('reflow').css('opacity', 1);
            });
        }
    });
  });

---

在类中附加一个空div，然后在瀑布完成后添加内容怎么样。 这样，只有新内容才会淡入

$('#loadmorebuilds-div').click(function() {
  $.ajax({
    url: 'includes/loadmorebuilds.php?type=' + type + '&pageIndex=' + pageIndex + '&st=' + searchTerm,
    success: function(html) {
            // append the new results
            $("#buildcontainer").append('<div class="newcontent"></div>')
            $("#buildcontainer").find('.newcontent').last().html(html).css('opacity', 0);
            imagesLoaded( '#buildcontainer', function() {
            $("#buildcontainer").waterfall('reflow').find('.newcontent').last().css('opacity', 1);
        });
    }
  });
});

$（'loadmorebuilds div'）。单击（函数（）{
$.ajax({
url:'includes/loadmorebuilds.php？type='+type+'&pageIndex='+pageIndex+'&st='+searchTerm，
成功：函数（html）{
//附加新结果
$（“#buildcontainer”）.append（“”）
$（“#buildcontainer”）.find（'.newcontent'）.last（）.html（html.css（'opacity'，0）；
imagesLoaded（'#buildcontainer'，function（）{
$（“#buildcontainer”）.瀑布（'reflow'）.find（'newcontent'）.last（）.css（'opacity'，1）；
});
}
});
});

我不知道您正在使用的JS库，但是为什么不

.hide（）

在

瀑布式方法完成之前，我想图像是附加在html中的。我可能错了…是的，对不起，图像在加载的html中，将更新问题。如果你不附加图像，将不会加载或。。。请参见我的编辑：更改不透明度。如果html被隐藏，另一个答案可能会导致触发callback imagesLoaded。附加项的div已经包含项。我希望元素追加到底部，然后简单地添加到底部。隐藏和显示div就我的目的而言，它打破了加载更多按钮的想法。这在理论上是可行的，只是想让它在瀑布库中玩得更好。选定容器内的所有元素都是选定的宽度。newcontent div也被赋予了这个名称，所以它只有一个长列。但我相信我能找到一个解决办法。