Question

我正在使用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），但它自身重叠，直到图像已加载，然后在容器上调用回流函数，使得项目落入其网格中。

我想只在图像加载后显示附加的数据并且项目已“重排”到瀑布网格中。

我只是不知道该怎么做。

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

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

Answer 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(html).hide();
            // wait untill all images are loaded before the waterfall function is called
            imagesLoaded( '#buildcontainer', function()
            {
                $("#buildcontainer").waterfall('reflow').show();
            });
        }
    });
  });

Answer 2

在调用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);
            });
        }
    });
  });

Answer 3

如何在类中附加一个空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);
        });
    }
  });
});

隐藏ajax附加html直到某一点

3 个答案: