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

Hide ajax appended html until certain point

本文关键字：一点 ajax html 隐藏      更新时间：2023-09-26

我正在使用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包含图像，我正在检查它们是否被加载。

隐藏更新的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);
        });
    }
  });
});
相关文章：