Question

我对jQuery，AJAX和Web开发人员都很陌生，所以这让我很疯狂。

我有一个AJAX请求将页面内容拉入当前内容，我正试图强制jQuery显示它，如下所示：

淡出当前内容
将div平滑调整为新内容
淡入新内容

到目前为止，我已经写了这样的东西。我把它改成了一堆，所以这可能不是我得到的最接近的，但同样的问题仍然存在。

$("#page-data").fadeOut(600).html(data);

$("#page-data").ready(function() {
    var newHeight = $('#' + divname).height();
    $("#page-data").animate({
        height: newHeight,
    }, 600, function() {
        $("#page-data").fadeIn(100);
    });
});

页面数据的格式很简单：

#page-data { position: relative; overflow: hidden; }

我的问题是$('#' + divname).height()没有说明div中可能出现的图像和其他内容。我尝试使用.load()代替.ready()，但之后根本没有调用回调。

Answer 1

由于问题中不包含任何HTML，我假设您的容器<div id="pageData">包含另一个<div>（由divname标识），正在加载您的动态内容。

首先，$(..).ready()只能在document对象上使用，因此将其应用于<div>会违反jQuery的文档。

我能想到实现目标的最好方法是跟踪HTML中您通过AJAX动态加载的任何图像并监视它们，直到它们全部被加载为止。然后您可以应用逻辑来设置容器的高度<div>。

问题在于，如果我们将load事件处理程序应用于已加载的图像，则它不会触发。弄清楚图像是否已经加载可能很棘手，但所接收的智慧似乎是检查complete属性（如果它存在）或检查图像的高度是否大于0：

function imageLoaded(img) {
    if(typeof img.complete != 'undefined') {
        return img.complete;
    }
    else {
        return(img.height > 0);
    }
}

现在我们可以采取以下步骤：

淡出将包含您的AJAX的<div>（例如#pageContent）含量
加载AJAX内容
搜索所有新内容图像，计算有多少，为每个图像添加一个load事件处理程序一，然后循环每个图像检查它是否已经加载并且如果是，则手动触发load事件。
在加载事件中，我们递减计数器。当计数器达到零时，计算容器<div>的高度并淡出内容

例如（see here for a working jsfiddle）：

$pageData = $('#pageData');
$pageContent = $('#pageContent');

$pageData.height($pageData.height());

$pageContent.fadeOut(function() {
    $pageContent.load('http://your.dynamic.content', contentLoaded);
});

function contentLoaded() {
    var $loadables = $(this).find('img');
    var loadableCount = $loadables.length;

    // Attach onLoad event handlers to each image
    $loadables.load(function() {
        loadableCount--;
        checkAllLoaded(loadableCount);
    });

    // Trigger the onLoad events manually for any images that have already loaded
    $loadables.each(function() {
        if(imageLoaded(this)) {
            $(this).trigger('load');
        }
    });
}

function checkAllLoaded(loadCount) {
    if (loadCount <= 0) {
        $('#pageData').animate({
            height: $('#pageContent').height()
        }, 600, function() {
            $('#pageContent').fadeIn();
        });
    }
}

设置html后动画和调整div的大小

1 个答案: