我正在使用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包含我正在检查它们正在加载的图像。
答案 0 :(得分: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();
});
}
});
});
答案 1 :(得分:0)
在调用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);
});
}
});
});
答案 2 :(得分:0)
如何在类中附加一个空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);
});
}
});
});